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的面向对象方法以及差别
Mar 31 Javascript
精通JavaScript 纠正 cleanWhitespace函数
Mar 11 Javascript
JavaScript 验证码的实例代码(附效果图)
Mar 22 Javascript
jquery ajax,ashx,json的用法总结
Feb 12 Javascript
jquery form 隐藏的input 选择
Apr 29 Javascript
angular.foreach 循环方法使用指南
Jan 06 Javascript
jQuery中的deferred对象和extend方法详解
May 08 jQuery
微信小程序本地缓存数据增删改查实例详解
May 24 Javascript
微信小程序 获取二维码实例详解
Jun 23 Javascript
js经验分享 JavaScript反调试技巧
Mar 10 Javascript
js 实现在2d平面上画8的方法
Oct 10 Javascript
微信小程序页面缩放式侧滑效果的实现代码
Nov 15 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
wordpress之wp-settings.php
2007/08/17 PHP
PHP两种去掉数组重复值的方法比较
2014/06/19 PHP
解决laravel 5.1报错:No supported encrypter found的办法
2017/06/07 PHP
实例讲解PHP表单处理
2019/02/15 PHP
JavaScript 常见对象类创建代码与优缺点分析
2009/12/07 Javascript
15个款优秀的 jQuery 图片特效插件推荐
2011/11/21 Javascript
微信企业号开发之微信考勤百度地图定位
2015/09/11 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
基于Vue.js实现数字拼图游戏
2016/08/02 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
2017/01/18 Javascript
Vue.js项目部署到服务器的详细步骤
2017/07/17 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
2017/08/17 Javascript
webpack4 css打包压缩问题的解决
2018/05/18 Javascript
js实现图片局部放大效果详解
2019/03/18 Javascript
详解Vue 的异常处理机制
2020/11/30 Vue.js
ptyhon实现sitemap生成示例
2014/03/30 Python
Python实现的多线程http压力测试代码
2017/02/08 Python
Python+树莓派+YOLO打造一款人工智能照相机
2018/01/02 Python
Python实现学校管理系统
2018/01/11 Python
深入分析python数据挖掘 Json结构分析
2018/04/21 Python
python3+PyQt5实现柱状图
2018/04/24 Python
Django使用Profile扩展User模块方式
2020/05/14 Python
Python decimal模块使用方法详解
2020/06/08 Python
基于python实现MQTT发布订阅过程原理解析
2020/07/27 Python
HTML5输入框下拉菜单功能的示例代码
2020/09/08 HTML / CSS
马来西亚综合购物网站:Lazada马来西亚
2018/06/05 全球购物
简历里的自我评价
2014/01/31 职场文书
安全生产演讲稿
2014/05/09 职场文书
文员求职信
2014/07/15 职场文书
放飞梦想演讲稿200字
2014/08/26 职场文书
2014物价局群众路线对照检查材料思想汇报
2014/09/21 职场文书
关于拾金不昧的感谢信
2015/01/21 职场文书
2015年主婚人婚礼致辞
2015/07/28 职场文书
《实心球》教学反思
2016/02/23 职场文书
Python何绘制带有背景色块的折线图
2022/04/23 Python
关于MySQL中explain工具的使用
2023/05/08 MySQL