现在科技太发达，移动设备像素越来越高，随便一张照片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. 解决Eclipse项目图标上的红色感叹号，红叉

    从外部导入了几个jar包发现工程上出现红叉,但展开又没有详细的指明任何错误,可能过如下几步: 1.检查Build Path中的各个依赖jar及library是否有warning的标志,若有,处理之:  ...

  2. ubuntu14.04切换root用户

    打开命令窗口(CTRL+ALT+T),输入:sudo -s -->接着输入管理密码, -->已经切换到root用户

  3. jsp内置对象作业2-留言簿

    1.留言簿页面:liuYan.jsp <%@ page language="java" contentType="text/html; charset=UTF-8& ...

  4. 【BZOJ 3879】SvT

    http://www.lydsy.com/JudgeOnline/problem.php?id=3879 SvT的中文是后缀虚树? 反正本蒟蒻不懂,还是$O(nlogn)$的后缀数组和单调栈维护来做, ...

  5. javascript 红宝书笔记之如何使用对象 如何操作数组

    对象定义  ===  引用类型,描述的是一类对象所具有的属性和方法     新对象的创建 方法     new + 构造函数       var person = new Object(); 对象字面 ...

  6. To IOC，代码结构演变的随想

    代码结构演变 项目开始阶段 需求: 提供一个系统,可以在新春佳节之际以邮件的形式给员工发送新春祝福. 开发人员: 张三 版本一 string msg = "新年快乐!过节费5000.&quo ...

  7. poj2186 强连通缩点

    Popular Cows Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 29773   Accepted: 12080 De ...

  8. 一起学HTML基础-CSS样式表-基本概念、分类、选择器

    一.基本概念: CSS  (Cascading Style Sheets)层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...

  9. 轻快的VIM（三）：删除

    这一节我们来看看删除,删除命令比较简单,不过要使删除更有效率 你需要配合我们第一节中讲的各种移动命令 字符删除 x 删除光标所在处字符 X 删除光标所在前字符 这里没有什么可注意的地方,但需要说明一下 ...

  10. htm.dropdownlist

    @Html.DropDownList("status", new SelectList(new[] { "驳回", "确认", " ...