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 相关文章推荐
优化javascript的执行速度
Jan 23 Javascript
js点击事件链接的问题解决
Apr 25 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
Nov 25 Javascript
JS常用正则表达式总结【经典】
May 12 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
Aug 18 Javascript
JS实现颜色的10进制转化成rgba格式的方法
Sep 04 Javascript
深入理解Node.js中通用基础设计模式
Sep 19 Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
Apr 30 Javascript
javascript for循环性能测试示例
Aug 07 Javascript
layui原生表单验证的实例
Sep 09 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
Apr 21 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
Ubuntu 16.04中Laravel5.4升级到5.6的步骤
2018/12/07 PHP
点弹代码 点击页面任何位置都可以弹出页面效果代码
2012/09/17 Javascript
页面只能打开一次Cooike如何实现
2012/12/04 Javascript
Javascript 赋值机制详解
2014/11/23 Javascript
下雪了 javascript实现雪花飞舞
2020/08/02 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
Bootstrap table使用方法详细介绍
2016/12/09 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
2016/12/15 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
2017/02/03 Javascript
JS实现的DIV块来回滚动效果示例
2017/02/07 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
2018/12/06 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
2019/09/26 Javascript
vue大型项目之分模块运行/打包的实现
2020/09/21 Javascript
基于JavaScript实现轮播图效果
2021/01/02 Javascript
pyqt4教程之messagebox使用示例分享
2014/03/07 Python
python对html代码进行escape编码的方法
2015/05/04 Python
python实现用户登录系统
2016/05/21 Python
ubuntu系统下 python链接mysql数据库的方法
2017/01/09 Python
python中获得当前目录和上级目录的实现方法
2017/10/12 Python
Python numpy 点数组去重的实例
2018/04/18 Python
python SMTP实现发送带附件电子邮件
2018/05/22 Python
pandas表连接 索引上的合并方法
2018/06/08 Python
python os.path模块常用方法实例详解
2018/09/16 Python
windows、linux下打包Python3程序详细方法
2020/03/17 Python
Django mysqlclient安装和使用详解
2020/09/17 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
阿玛尼美妆加拿大官方商城:Giorgio Armani Beauty加拿大
2017/10/24 全球购物
采购主管岗位职责
2014/02/01 职场文书
大学生工作自荐书
2014/06/16 职场文书
感情真挚的毕业生求职信
2014/07/19 职场文书
学习十八大标语
2014/10/09 职场文书
2015年超市收银员工作总结
2015/04/25 职场文书
教师思想工作总结2015
2015/05/13 职场文书
政审证明范文
2015/06/19 职场文书
python爬不同图片分别保存在不同文件夹中的实现
2021/04/02 Python
解决python绘图使用subplots出现标题重叠的问题
2021/04/30 Python