JS实现异步上传压缩图片


Posted in Javascript onApril 22, 2017

摘要: 使用iframe来处理异步上传图片,在现在这个时代来说,多多少少都有点落后了!单单就凭AJAX和JS就不能做到异步上传图片了吗?

感谢 think2011 这位兄台的JS库:https://github.com/think2011/LocalResizeIMG

先看调用页面:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <script type="text/javascript" src="./js/lrz.mobile.min.js"></script>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body class="upload">
<form id="form">
    <div id="img_show"></div>
    <div id="upload">
      <div id="img_file"><input type="file" accept="image/*" ><div class="btn">选择图片</div></div>
    </div>
    <input type="submit" class="tijiao" value="提交">
  </form>
</body>

<script type="text/javascript">
  var img;
  $("input:file").change(function (){
    //console.log(this.files[0]);
    lrz(this.files[0],{width:640,quality:0.9},function(rst){
      img = rst.base64;
      var html = [];
      var show_img = new Image();
      show_img.src = rst.base64;
      $("#img_show").html("<div class='upimg'></div>");
      $(".upimg").html(show_img);
    });
  });
  $("#form").submit(function (){
    var phone = $("input[name='phone']").val();
    var month = $("input[name='month']").val();
    $.post("upload.php",{img:img,phone:phone,month:month},function(data){
      img = null;
      alert(data.msg);
    },'json');
    return false;
  });
</script>
</html>

1.首先你要载入JS类库:

<script type="text/javascript" src="./js/lrz.mobile.min.js"></script>

2.然后就是写好form

3.准备处理图片以及图片异步提交的JS。

<script type="text/javascript">
  var img;
  $("input:file").change(function (){
    //console.log(this.files[0]);
    lrz(this.files[0],{width:640,quality:0.9},function(rst){
      img = rst.base64;
      var html = [];
      var show_img = new Image();
      show_img.src = rst.base64;
      $("#img_show").html("<div class='upimg'></div>");
      $(".upimg").html(show_img);
    });
  });
  $("#form").submit(function (){
    var phone = $("input[name='phone']").val();
    var month = $("input[name='month']").val();
    $.post("upload.php",{img:img},function(data){
      img = null;
      alert(data.msg);
    },'json');
    return false;
  });
</script>

从代码中可以看出,这个JS库是把图片转成码,然后用变量存起来,然后在用异步POST到服务器中在处理。

看起来貌似没有什么特别的地方,的确实在也没有什么特别的地方.......

后台处理程序PHP:

function error($msg=''){
  $return = array('msg'=>$msg);
  echo json_encode($return);
  exit();
}

function main(){
  if(!$_POST['img']){
    error('请上传图片!');
  }
  
  $img = $_POST['img'];
  
  $path = './upload/';
  
  $type_limit = array('jpg','jpeg','png');

  if(preg_match('/data:\s*image\/(\w+);base64,/iu',$img,$tmp)){
    if(!in_array($tmp[1],$type_limit)){
      error('图片格式不正确,只支持jpg,jpeg,png!');
    }
  }else{
    error('抱歉!上传失败,请重新再试!');
  }
  
  $img = str_replace(' ','+',$img);
  
  $img = str_replace($tmp[0], '', $img);

  $img = base64_decode($img);
  
  $file = $path.time().'.'.$tmp[1];
  if(!file_put_contents($file,$img)){
    error('上传图片失败!');
  }else{
    error('恭喜您!上传成功!');
  }
}
main();

上述代码如果有错误欢迎指出。

如上诉代码,正如你看到的那样,经过BASE64加密过的图片码经过JS异步的POST过来后端后,我们要把代码还原。但是JS库加密的时候会带有一些标签,所以还原前需要处理掉这些本来不属于图片的东西。

$img = str_replace(' ','+',$img);  
$img = str_replace($tmp[0], '', $img);
$img = base64_decode($img);

最后把代码塞进文件,设置好相应的文件名和扩展名,图片就成功上传到了服务器了。

注意:

前后端包括JS编码要要一致,建议UTF-8

如果图片还原不会来的话,那肯定是数据问题,打印POST过来的图片码出来看看。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
Apr 12 Javascript
Javascript 表单之间的数据传递代码
Dec 04 Javascript
ie下jquery.getJSON的缓存问题的处理方法
Mar 29 Javascript
JS继承--原型链继承和类式继承
Apr 08 Javascript
jquery删除提示框弹出是否删除对话框
Jan 07 Javascript
javascript的push使用指南
Dec 05 Javascript
node.js中的fs.readFile方法使用说明
Dec 15 Javascript
javascript实现动态统计图开发实例
Nov 21 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
Apr 21 Javascript
node.js 和HTML5开发本地桌面应用程序
Dec 13 Javascript
vue2滚动条加载更多数据实现代码
Jan 10 Javascript
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
Apr 22 #Javascript
Vue form 表单提交+ajax异步请求+分页效果
Apr 22 #Javascript
详解Vue 事件驱动和依赖追踪
Apr 22 #Javascript
JS使用cookie实现只出现一次的广告代码效果
Apr 22 #Javascript
利用JS实现简单的瀑布流加载图片效果
Apr 22 #Javascript
jQuery实现百度登录框的动态切换效果
Apr 21 #jQuery
HTML5+Canvas调用手机拍照功能实现图片上传(下)
Apr 21 #Javascript
You might like
php实现基于openssl的加密解密方法
2016/09/30 PHP
用php和jQuery来实现“顶”和“踩”的投票功能
2016/10/13 PHP
Gambit vs CL BO3 第一场 2.13
2021/03/10 DOTA
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
jQuery实现文章图片弹出放大效果
2017/04/06 jQuery
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
微信小程序中使用wxss加载图片并实现动画效果
2018/08/13 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
2019/09/16 Javascript
跟老齐学Python之复习if语句
2014/10/02 Python
用Python登录Gmail并发送Gmail邮件的教程
2015/04/17 Python
python从入门到精通(DAY 1)
2015/12/20 Python
尝试用最短的Python代码来实现服务器和代理服务器
2016/06/23 Python
Python模拟三级菜单效果
2017/09/11 Python
python处理Excel xlrd的简单使用
2017/09/12 Python
利用python求解物理学中的双弹簧质能系统详解
2017/09/29 Python
python使用wxpy实现微信消息防撤回脚本
2019/04/29 Python
10款最好的Python开发编辑器
2019/07/03 Python
Python对Excel按列值筛选并拆分表格到多个文件的代码
2019/11/05 Python
浅谈Keras中shuffle和validation_split的顺序
2020/06/19 Python
PyTorch中clone()、detach()及相关扩展详解
2020/12/09 Python
Python中全局变量和局部变量的理解与区别
2021/02/07 Python
html5桌面通知(Web Notifications)实例解析
2014/07/07 HTML / CSS
日本网路线上商品代购服务:转送JAPAN
2016/08/05 全球购物
房屋出租协议书
2014/04/10 职场文书
软件项目开发计划书
2014/05/01 职场文书
学校就业推荐信范文
2014/05/19 职场文书
海南召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
交通事故一次性赔偿协议书范本
2014/11/02 职场文书
2014年客服工作总结与计划
2014/12/09 职场文书
安全员岗位职责
2015/02/10 职场文书
高校自主招生校长推荐信
2015/03/23 职场文书
2016公司中秋节寄语
2015/12/07 职场文书
创业计划书之书店
2019/09/10 职场文书
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android