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关键字命名的疑问介绍
Apr 25 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
Mar 04 Javascript
JS本地刷新返回上一页代码
Jul 25 Javascript
Bootstrap基本组件学习笔记之分页(12)
Dec 08 Javascript
JS实现图片预加载之无序预加载功能代码
May 12 Javascript
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
微信小程序返回多级页面的实现方法
Oct 27 Javascript
基于JavaScript实现幸运抽奖页面
Jul 05 Javascript
如何使用vuex实现兄弟组件通信
Nov 02 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
Jul 20 Javascript
react合成事件与原生事件的相关理解
May 13 Javascript
JavaScript展开运算符和剩余运算符的区别详解
Feb 18 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
yii框架搜索分页modle写法
2016/12/19 PHP
php常用正则函数实例小结
2016/12/29 PHP
用JTrackBar实现的模拟苹果风格的滚动条
2007/08/06 Javascript
初窥JQuery-Jquery简介 入门了解篇
2010/11/25 Javascript
让你的CSS像Jquery一样做筛选的实现方法
2011/07/10 Javascript
12款经典的白富美型—jquery图片轮播插件—前端开发必备
2013/01/08 Javascript
JavaScript插件化开发教程(六)
2015/02/01 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
2015/02/18 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
2015/02/26 Javascript
基于jquery实现表格内容筛选功能实例解析
2016/05/09 Javascript
React router动态加载组件之适配器模式的应用详解
2018/09/12 Javascript
在vue中v-bind使用三目运算符绑定class的实例
2018/09/29 Javascript
VueJS 组件参数名命名与组件属性转化问题
2018/12/03 Javascript
解决layui动态加载复选框无法选中的问题
2019/09/20 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
vue 实现锚点功能操作
2020/08/10 Javascript
[02:11]DOTA2上海特级锦标赛主赛事第二日RECAP
2016/03/04 DOTA
提升Python程序运行效率的6个方法
2015/03/31 Python
python使用xlrd与xlwt对excel的读写和格式设定
2017/01/21 Python
Python各类图像库的图片读写方式总结(推荐)
2018/02/23 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
softmax及python实现过程解析
2019/09/30 Python
python+selenium实现12306模拟登录的步骤
2021/01/21 Python
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
网络安全方面的面试题
2015/11/04 面试题
自荐信结尾
2013/10/27 职场文书
学生会主席就职演讲稿
2014/01/14 职场文书
《悯农》教学反思
2014/04/28 职场文书
运动会广播稿200字(10篇)
2014/10/12 职场文书
导游欢迎词范文
2015/01/23 职场文书
天那边观后感
2015/06/09 职场文书
初一英语教学反思
2016/02/15 职场文书
教你怎么用Python操作MySql数据库
2021/05/31 Python
JavaScript分页组件使用方法详解
2021/07/26 Javascript
windows server2012 R2下安装PaddleOCR服务的的详细步骤
2022/09/23 Servers