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库 pj介绍
Dec 19 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
Oct 14 Javascript
jQuery圆形统计图开发实例
Jan 04 Javascript
JS实现的网页倒计时数字时钟效果
Mar 02 Javascript
js HTML5 Ajax实现文件上传进度条功能
Feb 13 Javascript
AngularJS 让人爱不释手的八种功能
Mar 23 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
Aug 23 Javascript
Avalonjs双向数据绑定与监听的实例代码
Jun 23 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
Jun 30 Javascript
JS实现模糊查询带下拉匹配效果
Jun 21 Javascript
vue 中url 链接左边的小图标更改问题
Dec 30 Javascript
vue-cli脚手架的.babelrc文件用法说明
Sep 11 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
为什么那些咖啡爱好者大多看不上连锁咖啡店?
2021/03/06 咖啡文化
PHP 数组排序方法总结 推荐收藏
2010/06/30 PHP
php 定界符格式引起的错误
2011/05/24 PHP
PHP转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
配置php网页显示各种语法错误
2013/09/23 PHP
ubuntu12.04使用c编写php扩展模块教程分享
2013/12/25 PHP
一个php生成16位随机数的代码(两种方法)
2014/09/16 PHP
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
php设计模式之策略模式应用案例详解
2019/06/17 PHP
javascript 控制input只允许输入的各种指定内容
2014/06/19 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
Vue computed计算属性的使用方法
2017/07/14 Javascript
react-native fetch的具体使用方法
2017/11/01 Javascript
关于vue的npm run dev和npm run build的区别介绍
2019/01/14 Javascript
[44:40]KG vs LGD 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python实现ftp客户端示例分享
2014/02/17 Python
在Django的模型中添加自定义方法的示例
2015/07/21 Python
Python3.5装饰器典型案例分析
2019/04/30 Python
详解用Python实现自动化监控远程服务器
2019/05/18 Python
如何给Python代码进行加密
2020/01/10 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
俄罗斯达美乐比萨外送服务:Domino’s Pizza
2020/12/18 全球购物
枚举与#define宏的区别
2014/04/30 面试题
C#笔试题
2015/07/14 面试题
大学生军训广播稿
2014/01/24 职场文书
《狐假虎威》教学反思
2014/02/07 职场文书
沙滩主题婚礼活动策划方案
2014/09/15 职场文书
校园广播稿100字
2014/10/06 职场文书
乡镇党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
经验交流材料格式
2014/12/30 职场文书
2016计算机专业毕业生自荐信
2016/01/28 职场文书
请学会珍惜眼前,因为人生没有下辈子!
2019/11/12 职场文书
MySQL系列之七 MySQL存储引擎
2021/07/02 MySQL