localResizeIMG先压缩后使用ajax无刷新上传(移动端)


Posted in Javascript onAugust 11, 2015

下面通过文字说明和代码分析的方式给大家分享移动端图片上传之localResizeIMG先压缩后ajax无刷新上传,具体实现过程请看下文。

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

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

处理过程

LocalResizeIMG压缩图片
AjaxPost图片base64到后台
后台接收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,图片尺寸变大了,会失真),不知道大家有没有什么好的解决方法。

以上内容是本文介绍localResizeIMG先压缩后使用ajax无刷新上传的全部内容,希望大家喜欢。

Javascript 相关文章推荐
javascript 面向对象继承
Nov 26 Javascript
JS 操作符整理[推荐收藏]
Nov 15 Javascript
禁用JavaScript控制台调试的方法
Mar 07 Javascript
js函数调用的方式
May 06 Javascript
学习javascript面向对象 理解javascript原型和原型链
Jan 04 Javascript
Bootstrap 树控件使用经验分享(图文解说)
Nov 06 Javascript
JavaScript中关于class的调用方法
Nov 28 Javascript
js中apply和Math.max()函数的问题及区别介绍
Mar 27 Javascript
实现Vue的markdown文档可以在线运行的方法示例
Dec 11 Javascript
JSON字符串操作移除空串更改key/value的介绍
Jan 05 Javascript
vue实现微信分享链接添加动态参数的方法
Apr 29 Javascript
Javascript中的奇葩知识,你知道吗?
Jan 25 Javascript
JavaScript设置表单上传时文件个数的方法
Aug 11 #Javascript
js限制文本框只能输入中文的方法
Aug 11 #Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
Aug 11 #Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
Aug 11 #Javascript
js模仿php中strtotime()与date()函数实现方法
Aug 11 #Javascript
JavaScript SHA512&amp;SHA256加密算法详解
Aug 11 #Javascript
js中 javascript:void(0) 用法详解
Aug 11 #Javascript
You might like
SONY ICF-F10中波修复记
2021/03/02 无线电
php实现把数组按指定的个数分隔
2014/02/17 PHP
详解php几行代码实现CSV格式文件输出
2017/07/01 PHP
PHP基于curl实现模拟微信浏览器打开微信链接的方法示例
2019/02/15 PHP
让getElementsByName适应IE和firefox的方法
2007/09/24 Javascript
使用IE6看老赵的博客 jQuery初探
2010/01/17 Javascript
JavaScript 题型问答有答案参考
2010/02/17 Javascript
jQuery bind事件使用详解
2011/05/05 Javascript
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
vue中渐进过渡效果实现
2016/10/27 Javascript
说说AngularJS中的$parse和$eval的用法
2017/09/14 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
2017/09/21 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
2018/01/08 jQuery
移动web开发之touch事件实例详解
2018/01/17 Javascript
jQuery实现基本隐藏与显示效果的方法详解
2018/09/05 jQuery
vue中uni-app 实现小程序登录注册功能
2019/10/12 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
如何基于原生javaScript生成带图片的二维码
2019/11/21 Javascript
Javascript异步执行不按顺序解决方案
2020/04/30 Javascript
解决vue页面刷新,数据丢失的问题
2020/11/24 Vue.js
ES6的循环与可迭代对象示例详解
2021/01/31 Javascript
[15:28]DOTA2 HEROS教学视频教你分分钟做大人-剧毒术士
2014/06/13 DOTA
[03:58]兄弟们,回来开黑了!DOTA2昔日战友招募宣传视频
2016/07/17 DOTA
python清除字符串里非字母字符的方法
2015/07/02 Python
对python中UDP,socket的使用详解
2019/08/22 Python
Python imread、newaxis用法详解
2019/11/04 Python
Python中关于logging模块的学习笔记
2020/06/03 Python
Pycharm如何自动生成头文件注释
2020/11/14 Python
牛津在线药房:Oxford Online Pharmacy
2020/11/16 全球购物
美术专业学生个人自我评价
2013/09/19 职场文书
高中军训广播稿
2014/01/14 职场文书
求职简历中自我评价
2014/01/28 职场文书
元宵节晚会主持人串词
2014/03/25 职场文书
安全责任书怎么写
2014/07/28 职场文书
党校学习心得体会范文
2014/09/09 职场文书
JavaScript实例 ODO List分析
2022/01/22 Javascript