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 相关文章推荐
js 图片随机不定向浮动的实现代码
Jul 02 Javascript
jQuery 三击事件实现代码
Sep 11 Javascript
jQuery使用post方法提交数据实例
Mar 25 Javascript
jQuery检测返回值的数据类型
Jul 13 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
Apr 01 Javascript
详解Angular中$cacheFactory缓存的使用
Aug 19 Javascript
使用ionic切换页面卡顿的解决方法
Dec 16 Javascript
Node.js之网络通讯模块实现浅析
Apr 01 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
Jul 10 Javascript
Mint UI 基于 Vue.js 移动端组件库
Nov 07 Javascript
微信小程序实现图片压缩功能
Jan 26 Javascript
validform表单验证的实现方法
Mar 08 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
Win2000+Apache+MySql+PHP4+PERL安装使用小结
2006/10/09 PHP
社区(php&amp;&amp;mysql)四
2006/10/09 PHP
PHP中开启gzip压缩的2种方法
2015/01/31 PHP
php实现的mongoDB单例模式操作类
2018/01/20 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
2012/02/10 Javascript
JavaScript的Module模式编程深入分析
2013/08/13 Javascript
jQuery中get和post方法传值测试及注意事项
2014/08/08 Javascript
深入理解javascript变量声明
2014/11/20 Javascript
jQuery实现隔行背景色变色
2014/11/24 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
jquery实现对联广告的方法
2015/02/05 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
2015/06/26 Javascript
Vue组件tree实现树形菜单
2017/04/13 Javascript
Vue源码探究之虚拟节点的实现
2019/04/17 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
2019/10/09 Javascript
[05:28]刀塔密之一:团结则存
2014/07/03 DOTA
[03:33]TI9战队采访 - Infamous
2019/08/20 DOTA
Python中将字典转换为列表的方法
2016/09/21 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
python基于json文件实现的gearman任务自动重启代码实例
2019/08/13 Python
python 实现读取csv数据,分类求和 再写进 csv
2020/05/18 Python
CSS3动画特效在活动页中的应用
2020/01/21 HTML / CSS
Tretorn美国官网:瑞典外套和鞋类品牌,抵御风雨
2018/07/19 全球购物
Java里面如何创建一个内部类的实例
2015/01/19 面试题
英智兴达软件测试笔试题
2016/10/12 面试题
一百多行代码实现react拖拽hooks
2021/03/23 Javascript
手术室护士自我鉴定
2013/10/14 职场文书
给水排水工程专业毕业生推荐信
2013/10/28 职场文书
餐饮业创业计划书范文
2014/01/06 职场文书
一年级班主任工作总结2014
2014/11/08 职场文书
长城导游词300字
2015/01/30 职场文书
部门优秀员工推荐信
2015/03/24 职场文书
红色故事汇观后感
2015/06/18 职场文书
文明上网主题班会
2015/08/14 职场文书