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 相关文章推荐
YUI 读码日记之 YAHOO.util.Dom - Part.1
Mar 22 Javascript
js事件(Event)知识整理
Oct 11 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
Jul 10 Javascript
jQuery的cookie插件实现保存用户登陆信息
Apr 15 Javascript
在myeclipse中如何加入jquery代码提示功能
Jun 03 Javascript
使用js dom和jquery分别实现简单增删改
Sep 11 Javascript
jQuery仿京东商城楼梯式导航定位菜单
Jul 25 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
ReactNative实现Toast的示例
Dec 31 Javascript
3分钟读懂移动端rem使用方法(推荐)
May 06 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
May 23 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
Aug 06 Javascript
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
如何开始收听短波广播
2021/03/01 无线电
PHP获取ip对应地区和使用网络类型的方法
2015/03/11 PHP
WordPress开发中用于标题显示的相关函数使用解析
2016/01/07 PHP
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
2010/07/13 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
javascript制作网页图片上实现下雨效果
2015/02/26 Javascript
JS实现在页面随时自定义背景颜色的方法
2015/02/27 Javascript
js通过iframe加载外部网页的实现代码
2015/04/05 Javascript
JavaScript中Null与Undefined的区别解析
2015/06/30 Javascript
JavaScript取得键盘按下方向键是哪个的方法
2015/08/04 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
2016/09/19 Javascript
jqgrid实现简单的单行编辑功能
2017/09/30 Javascript
Vue-router 中hash模式和history模式的区别
2018/07/24 Javascript
Vue实现类似Spring官网图片滑动效果方法
2019/03/01 Javascript
使用vue开发移动端管理后台的注意事项
2019/03/07 Javascript
python学习笔记:字典的使用示例详解
2014/06/13 Python
python脚本设置系统时间的两种方法
2016/02/21 Python
python直接访问私有属性的简单方法
2016/07/25 Python
Django contenttypes 框架详解(小结)
2018/08/13 Python
python中嵌套函数的实操步骤
2019/02/27 Python
用Python抢火车票的简单小程序实现解析
2019/08/14 Python
python爬虫爬取幽默笑话网站
2019/10/24 Python
python银行系统实现源码
2019/10/25 Python
Pytorch 实现sobel算子的卷积操作详解
2020/01/10 Python
python爬虫调度器用法及实例代码
2020/11/30 Python
家庭户外服装:Hawkshead
2017/11/02 全球购物
美国值得信赖的婚恋交友网站:eHarmony
2018/10/04 全球购物
美国瑜伽服装和装备购物网站:Mukha Yoga
2019/02/22 全球购物
南京软件公司的.net程序员笔试题
2014/08/31 面试题
车祸赔偿收入证明
2014/01/09 职场文书
保护环境建议书400字
2014/05/13 职场文书
学习十八届四中全会精神思想汇报
2014/10/23 职场文书
大学生暑期社会实践证明范本
2014/10/24 职场文书
2014年党风廉政建设工作总结
2014/11/19 职场文书
公司规章制度范本
2015/08/03 职场文书
python tkinter Entry控件的焦点移动操作
2021/05/22 Python