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 数值项目的格式化函数代码
May 14 Javascript
javascript开发技术大全 第4章 直接量与字符集
Jul 03 Javascript
js之onload事件的一点使用心得
Aug 14 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
Nov 07 Javascript
微信QQ的二维码登录原理js代码解析
Jun 23 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
Jun 26 Javascript
node.js操作mongodb简单示例分享
May 25 Javascript
Node.JS更改Windows注册表Regedit的方法小结
Aug 18 Javascript
微信小程序使用字体图标的方法
May 23 Javascript
Vue 2.0双向绑定原理的实现方法
Oct 23 Javascript
Node.js web 应用如何封装到Docker容器中
Sep 01 Javascript
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
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
phpExcel中文帮助手册之常用功能指南
2014/08/18 PHP
php session_decode函数用法讲解
2019/05/26 PHP
Laravel中如何轻松容易的输出完整的SQL语句
2020/07/26 PHP
javascript+xml技术实现分页浏览
2008/07/27 Javascript
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
javascript instanceof,typeof的区别
2010/03/24 Javascript
JS日期和时间选择控件升级版(自写)
2013/08/02 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
2014/08/30 Javascript
javascript中bind函数的作用实例介绍
2014/09/28 Javascript
Js与Jq 获取页面元素值的方法和差异对比
2015/04/30 Javascript
node.js回调函数之阻塞调用与非阻塞调用
2015/11/13 Javascript
微信小程序 Storage API实例详解
2016/10/02 Javascript
AjaxUpLoad.js实现文件上传
2018/03/05 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
2018/03/05 Javascript
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
Python脚本实现12306火车票查询系统
2016/09/30 Python
详解Python字典小结
2018/10/20 Python
Ubuntu下升级 python3.7.1流程备忘(推荐)
2018/12/10 Python
Python OpenCV利用笔记本摄像头实现人脸检测
2020/08/20 Python
人工神经网络算法知识点总结
2019/06/11 Python
使用python修改文件并立即写回到原始位置操作(inplace读写)
2020/06/28 Python
美国皮靴公司自1863年:The Frye Company
2016/11/30 全球购物
FORZIERI澳大利亚站:全球顶级奢华配饰精品店
2016/12/31 全球购物
巴西一家专门从事家居和装饰的连锁店:Camicado
2019/08/14 全球购物
工商管理应届生求职信
2013/10/07 职场文书
计算机应用职专应届生求职信
2013/11/12 职场文书
计算机专业毕业生推荐信
2013/11/25 职场文书
学校七一活动方案
2014/01/19 职场文书
信息与计算科学专业推荐信
2014/02/23 职场文书
质量月活动策划方案
2014/03/10 职场文书
市政工程技术专业自荐书
2014/07/06 职场文书
小学安全教育月活动总结
2014/07/07 职场文书
庆祝国庆节演讲稿2014
2014/09/19 职场文书
2015年“我们的节日·重阳节”活动总结
2015/07/29 职场文书
梳理总结Python开发中需要摒弃的18个坏习惯
2022/01/22 Python
阿里云服务器Ubuntu 20.04上安装Odoo 15
2022/05/20 Servers