现在科技太发达，移动设备像素越来越高，随便一张照片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. elasticsearch-查询基础篇

    elasticsearch的查询有两部分组成:query and filter. 两者的主要区别在于:filter是不计算相关性的,同时可以cache.因此,filter速度要快于query. 先记录 ...

  2. 【CodeVS 3153】取石子游戏

    http://codevs.cn/problem/3153/ 对于这道题,直觉告诉我每一个状态一定是必胜或必败的 然后设定操作次数t,t为取完些石子最多需要多少步. 如果\(a_i\)不为1,\(t= ...

  3. DIV+CSS系统学习：转载

    第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的 ...

  4. HSV

    HSV 相比于面向机器的RGB, HSV或HSI更贴近于人对颜色的描述: H: Hue, 颜色本身 S: Saturation, 纯色被白色稀释的程度. V: Value, 或I, Intensity ...

  5. ES6新特性：Proxy代理器

    ES6新特性:Proxy: 要使用的话, 直接在浏览器中执行即可, node和babel目前还没有Proxy的polyfill;,要使用的话,直接在浏览器中运行就好了, 浏览器的兼容性为:chrome ...

  6. JSP 中的 tag 文件

    在jsp文件中,可以引用 tag 和tld 文件,本文主要针对 tag 对于tag 文件 1)将此类文件放在 WEB-INF 下,比如 /WEB-INF/tags,tags 是目录,其下可以有多个.t ...

  7. EF异常：“System.InvalidOperationException”类型的未经处理的异常在 mscorlib.dll 中发生

     实体框架System.Data.Entity.SqlServer提供者类型”. SqlProviderServices EntityFramework. 的在应用程序配置文件注册状态"置疑 ...

  8. 简进祥-SVN版本控制方案：多分支并行开发，多环境自动部署

    两地同时开发一个产品,目前线上有3个环境:测试环境.预发布环境.生产环境.目前系统部署采用jenkins自动化部署工具 用jenkins部署的方案 jenkins 测试环境:配置了各个分支的svn 地 ...

  9. Hp自学整理html

    a:hover {text-decoration:underline; color:#00FF00;}/* 鼠标悬浮在链接上时.出现下划线颜色变绿色 */ display:inline.block.i ...

  10. 【caffe】loss function、cost function和error

    @tags: caffe 机器学习 在机器学习(暂时限定有监督学习)中,常见的算法大都可以划分为两个部分来理解它 一个是它的Hypothesis function,也就是你用一个函数f,来拟合任意一个 ...