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 相关文章推荐
jQuery之折叠面板的深入解析
Jun 19 Javascript
一个简单的动态加载js和css的jquery代码
Sep 01 Javascript
js实现有时间限制消失的图片方法
Feb 27 Javascript
AngularJS快速入门
Apr 02 Javascript
javascript实现随机生成DIV背景色
Jun 20 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
Dec 25 Javascript
JS对象深度克隆实例分析
Mar 16 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
Jun 28 Javascript
详解Js里的for…in和for…of的用法
Mar 28 Javascript
Vue实例的对象参数options的几个常用选项详解
Nov 08 Javascript
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
javascript实现数字时钟效果
Feb 06 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
PHP 图片上传实现代码 带详细注释
2010/04/29 PHP
LotusPhp笔记之:Logger组件的使用方法
2013/05/06 PHP
一组PHP加密解密函数分享
2014/06/05 PHP
Laravel搭建后台登录系统步骤详解
2016/07/26 PHP
深入学习微信网址链接解封的防封原理visit_type
2019/08/15 PHP
javascript学习笔记(二十) 获得和设置元素的特性(属性)
2012/06/20 Javascript
js 字符串转换成数字的三种方法
2013/03/23 Javascript
AngularJS中处理多个promise的方式
2016/02/02 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
2016/03/29 Javascript
JS实现数字格式千分位相互转换方法
2016/08/01 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
2016/08/06 Javascript
JS瀑布流实现方法实例分析
2016/12/19 Javascript
angular 用拦截器统一处理http请求和响应的方法
2017/06/08 Javascript
bootstrap multiselect下拉列表功能
2017/08/22 Javascript
JS和JQuery实现雪花飘落效果
2017/11/30 jQuery
koa socket即时通讯的示例代码
2018/09/07 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
javascript异常处理实现原理详解
2020/02/17 Javascript
js实现随机抽奖
2020/03/19 Javascript
uniapp实现可滑动选项卡
2020/10/21 Javascript
Python中优化NumPy包使用性能的教程
2015/04/23 Python
python中numpy基础学习及进行数组和矢量计算
2017/02/12 Python
Windows和Linux下Python输出彩色文字的方法教程
2017/05/02 Python
如何使用pyinstaller打包32位的exe程序
2019/05/26 Python
Django REST framework 视图和路由详解
2019/07/19 Python
Atom Python 配置Python3 解释器的方法
2019/08/28 Python
通过代码实例了解Python异常本质
2020/09/16 Python
python中@contextmanager实例用法
2021/02/07 Python
css3弹性盒模型(Flexbox)详细介绍
2014/10/08 HTML / CSS
图解CSS3制作圆环形进度条的实例教程
2016/05/26 HTML / CSS
护理学中专毕业生求职信
2013/11/11 职场文书
个人收入证明范本
2014/01/12 职场文书
《赠汪伦》教学反思
2014/04/12 职场文书
汽车维修求职信
2014/06/15 职场文书
玩手机检讨书1000字
2014/10/20 职场文书
javascript代码简写的几种常用方式汇总
2021/08/23 Javascript