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 相关文章推荐
JS 面向对象的5钟写法
Jul 31 Javascript
jquery live()调用不存在的解决方法
Feb 26 Javascript
Javascript技术栈中的四种依赖注入详解
Feb 23 Javascript
极力推荐10个短小实用的JavaScript代码段
Aug 03 Javascript
轻松学习Javascript闭包
Mar 01 Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 Javascript
浅谈angular.js跨域post解决方案
Aug 30 Javascript
JavaScript框架Angular和React深度对比
Nov 20 Javascript
实例详解Node.js 函数
Jun 10 Javascript
基于bootstrap页面渲染的问题解决方法
Aug 09 Javascript
vue中子组件的methods中获取到props中的值方法
Aug 27 Javascript
JS中的变量作用域(console版)
Jul 18 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
一个取得文件扩展名的函数
2006/10/09 PHP
默默简单的写了一个模板引擎
2007/01/02 PHP
PHP HTML代码串 截取实现代码
2009/06/29 PHP
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
利用PHP函数计算中英文字符串长度的方法
2014/11/11 PHP
PHP 在数组中搜索给定的简单实例 array_search 函数
2016/06/13 PHP
PHP实现统计在线人数功能示例
2016/10/15 PHP
PHP读取文本文件并逐行输出该行使用最多的字符与对应次数的方法
2016/11/25 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
Javascript中暂停功能的实现代码
2007/03/04 Javascript
Jquery使用val方法读写value值
2015/05/18 Javascript
jquery.mousewheel实现整屏翻屏效果
2015/08/30 Javascript
Bootstrap每天必学之按钮
2015/11/26 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
2015/12/24 Javascript
浅谈 Vue v-model指令的实现原理
2017/06/08 Javascript
Vuex的初探与实战小结
2018/11/26 Javascript
使用vue-router切换页面时实现设置过渡动画
2019/10/31 Javascript
jquery实现弹窗(系统提示框)效果
2019/12/10 jQuery
vue实现简单图片上传
2020/06/30 Javascript
js利用拖放实现添加删除
2020/08/27 Javascript
[01:11:11]Alliance vs RNG 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
[40:19]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.18
2020/12/19 DOTA
python进阶教程之异常处理
2014/08/30 Python
粗略分析Python中的内存泄漏
2015/04/23 Python
Python类属性的延迟计算
2016/10/22 Python
Python3利用print输出带颜色的彩色字体示例代码
2019/04/08 Python
Python用类实现扑克牌发牌的示例代码
2020/06/01 Python
StubHub意大利:购买和出售全球演唱会和体育赛事门票
2017/11/21 全球购物
企业演讲稿范文
2013/12/28 职场文书
高中班主任评语大全
2014/04/25 职场文书
老公保证书范文
2014/04/29 职场文书
讲文明知礼仪演讲稿
2014/09/13 职场文书
毕业纪念册寄语大全
2015/02/26 职场文书
《云雀的心愿》教学反思
2016/02/23 职场文书
2019暑假学生安全口号
2019/06/27 职场文书