现在科技太发达，移动设备像素越来越高，随便一张照片2M+，但是要做移动端图片上传和pc上略有不同，移动端你不能去限制图片大小，让用户先处理图片再上传，这样不现实。所以理解的解决方案就是在上传先进行图片压缩，然后再把压缩后的图片上传到服务器。

一翻google之后，发现了localResizeIMG，它会对图片进行压缩成你指定宽度及质量度并转换成base64图片格式，那么我们就可以把这个base64通过ajax传到后台，再进行保存，先压缩后上传的目的就达到了。

处理过程

  1. LocalResizeIMG压缩图片
  2. AjaxPost图片base64到后台
  3. 后台接收base64并保存，返回状态

前台代码

重点，引用LocalResizeIMG.js（插件主体）及mobileBUGFix.mini.js（移动端的补丁）

<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8">

<title>移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传</title>

<meta name="description" content="" />

<meta name="viewport" content="width=device-width , initial-scale=1.0 , user-scalable=0 , minimum-scale=1.0 , maximum-scale=1.0" />

<script type='text/javascript' src='js/jquery-2.0.3.min.js'></script>

<script type='text/javascript' src='js/LocalResizeIMG.js'></script>

<script type='text/javascript' src='js/patch/mobileBUGFix.mini.js'></script>

<style type="text/css">

  body{font-family:"微软雅黑"}

  .uploadbtn{ display:block;height:40px; line-height:40px; color:#333; text-align:center; width:100%; background:#f2f2f2; text-decoration:none; }

  .imglist{min-height:200px;margin:10px;}

  .imglist img{width:100%;}

</style>

</head>

<body>

<div style="width:500px;margin:10px auto; border:solid 1px #ddd; overflow:hidden; ">

  <input type="file" id="uploadphoto" name="uploadfile" value="请点击上传图片" style="display:none;" />

  <div class="imglist"></div>

  <a href="javascript:void(0);" onclick="uploadphoto.click()" class="uploadbtn">点击上传文件</a>

</div>

<div style="text-align:center;margin-top:50px;">@ <a href="http://www.devdo.net/">码农小兵,专注web开发 欢迎投稿</a></div>

</body>

</html>

Js部份，localResizeIMG及Ajax提交部份

使用方法

$('input:file').localResizeIMG({

      width: 400,//宽度

      quality: 1,//质量

      success: function (result) {

           result.base64/result.clearBase64

      }

});

localResizeIMG参数：

  • width:缩略图宽度
  • quality:图片质量，0—1，越大越好

localResizeIMG返回值

  • result.base64:带图片类型的base64编码，可直接用于img标签的src，如“data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/…2wBDAAYEBQYFBAY”;
  • result.clearBase64:不带图片类型的编码，如“/9j/4AAQSkZJRgABAQAAAQABAAD/…2wBDAAYEBQYFBAY”
$(document).ready(function(e) {

   $('#uploadphoto').localResizeIMG({

      width: 400,

      quality: 1,

      success: function (result) {

          var submitData={

                base64_string:result.clearBase64,

            };

        $.ajax({

           type: "POST",

           url: "upload.php",

           data: submitData,

           dataType:"json",

           success: function(data){

             if (0 == data.status) {

                alert(data.content);

                return false;

             }else{

                alert(data.content);

                var attstr= '<img src="'+data.url+'" alt="" />';

                $(".imglist").append(attstr);

             }

           },

            complete :function(XMLHttpRequest, textStatus){

            },

            error:function(XMLHttpRequest, textStatus, errorThrown){ //上传失败

               alert(XMLHttpRequest.status);

               alert(XMLHttpRequest.readyState);

               alert(textStatus);

            }

        });

      }

  });

});

保存文件

在上面一步中，我们把result.clearBase64通过Ajax传入到upload.php中，接下来我们就要在upload.php中接收base64参数，把它转换成img文件保存来服务器中，并给出提示。

 $base64_string = $_POST['base64_string'];

 $savename = uniqid().'.jpeg';//localResizeIMG压缩后的图片都是jpeg格式

 $savepath = 'images/'.$savename; 

 $image = base64_to_img( $base64_string, $savepath );

 if($image){

      echo '{"status":1,"content":"上传成功","url":"'.$image.'"}';

 }else{

      echo '{"status":0,"content":"上传失败"}';

 } 

 function base64_to_img( $base64_string, $output_file ) {

     $ifp = fopen( $output_file, "wb" );

     fwrite( $ifp, base64_decode( $base64_string) );

     fclose( $ifp );

     return( $output_file );

 }

不足之处

  • localResizeIMG压缩后的图片模式都是jpeg，不能保证原有格式。
  • 当图片宽度小于localResizeIMG设置的width参数时，图片会被拉申，从而引起图片失真（比如width高为600，图片只在400px时，压缩后的图片就变成了600px,图片尺寸变大了，会失真），不知道大家有没有什么好的解决方法。

DEMO 下载

移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传的更多相关文章

  1. ajaxfileupload.js插件结合一般处理文件实现Ajax无刷新上传

    先上几张图更直观展示一下要实现的功能.本功能主要通过Jquery ajaxfileupload.js插件结合ajaxUpFile.ashx一般应用程序处理文件实现Ajax无刷新上传功能,结合NPOI2 ...

  2. ajax无刷新上传和下载

    关于ajax无刷新上传和下载 这是一个没什么含量但是又用的比较多又不得不说的问题,其实真的不想说,因为没什么好说的. 关于上传 1.使用Flash,ActiveX 上传 ,略... 2.自己写XMLH ...

  3. ajax 无刷新上传

    最近要做微信的图文上传,因为一个图文了表中可以有多个图文,所有按钮需要随时添加,所以做了一种无刷新上传的方法. 首先我们要在html页面中写上这样的几段代码 javascript: $(functio ...

  4. Ajax 无刷新上传文件插件 uploadify 的使用

    在表单中无法直接使用 Ajax 上传文件,解决的思路可以是使用插件无刷新地上传文件,返回文件上传后的地址,然后把该地址作为 Ajax 的参数传递给服务器端进行数据库处理.可以使用 uploadify ...

  5. ajax无刷新上传

    我们在使用上传控件的时候,会遇到刷新的问题,最近使用ajax做的上传,觉得效果还是很不错. 首先,我们需要在页面上放上上传控件:需要注意的是,我们必须放在form里面,实现表单上传.  <for ...

  6. ajax无刷新上传文件

    网页上传文件最简单的方式就是通过表单上传了,但是在提交表单的时候会导致网页刷新,但有的时候我们不想网页刷新,有什么办法呢,我们可以使用ajax上传文件来做到这一点.只有ajax还不行,还需要JavaS ...

  7. jQuery.form Ajax无刷新上传错误 (jQuery.handleError is not a function) 解决方案

    今天,随着ajaxfileupload时间firebug财报显示,"jQuery.handleError is not a function"错误.因为一旦使用jQuery.for ...

  8. jquery 的ajax无刷新上传文件之后，页面还是会莫名的刷新-----解决办法

    文件上传用到全局数组: $_FILES 只需要把下面的 <button onclick="post()">提交</button> 改为 <input ...

  9. jquery ajax 无刷新上传

    var form = new FormData(); form.append('file', $("#submitmaterials").find("input" ...

随机推荐

  1. Java反射机制学习与研究

    Java反射机制:可以获取正在运行时的Java对象. 1.判断运行时对象对象所属的类. 2.判断运行时对象所具有的成员变量和方法. 3.还可以调用到private方法,改变private变量的值. S ...

  2. SimpleDateFormate的使用

    import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Date; public cl ...

  3. [转]用jpa创建web项目,报错:No persistence units parsed from {classpath*:META-INF/persistence.xml}

    原文地址:http://blog.sina.com.cn/s/blog_6826662b01015opk.html 最近做一个web项目用到了Spring+JPA,由于没有正确配置persistenc ...

  4. iOS开发小技巧-修改SliderBar指针的样式(牢记这个方法,只能通过代码来修改)

    代码: // 修改进度条的指针图片 [self.progressSlider setThumbImage:[UIImage imageNamed:@"player_slider_playba ...

  5. 区间DP lightoj 1422

    t个样例 n  n个数字 从 1->n  穿衣服  脱了就不能再用 ,可以套 问最少几件衣服 #include<stdio.h> #include<string.h> # ...

  6. Ext-设置form表单不可编辑

    1. var formEach = win.down('form').items.items; Ext.each(formEach,function(item){ console.log(item); ...

  7. Android NDK开发

    Android NDK 开发教程(极客学院) 一.Android NDK环境搭建 使用最新ndk,直接抛弃cygwin,以前做Android的项目要用到NDK就必须要下载NDK,下载安装Cygwin( ...

  8. 【CodeForces 698A】Vacations

    f[i][0..2]表示第i天休息|运动|比赛最少的休息天数. #include <cstdio> #include <cstring> #include <algori ...

  9. Hive 中的分号问题

    1.  hive表中有一列值,是以 分号 ; 为分隔符连接存储的 1470047164;1470047628;1470049068;1470048978;1470048922;1470047658;1 ...

  10. 【BZOJ-4289】Tax 最短路 + 技巧建图

    4289: PA2012 Tax Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 168  Solved: 69[Submit][Status][Dis ...