js移动端图片压缩上传功能


Posted in Javascript onAugust 18, 2020

移动端图片压缩上传功能如何实现?

做移动端开发的时候,form里面的file后台经常获取不到,用foemdata也拿不到

找到了一个formdata的脚本

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
 <title>移动端图片压缩上传demo</title>
 <style>
 *{margin: 0;padding: 0;}
 li{list-style-type: none;}
 a,input{outline: none;-webkit-tap-highlight-color:rgba(0,0,0,0);}
 #choose{display: none;}
 canvas{width: 100%;border: 1px solid #000000;}
 #upload{display: block;margin: 10px;height: 60px;text-align: center;line-height: 60px;border: 1px solid;border-radius: 5px;cursor: pointer;}
 .touch{background-color: #ddd;}
 .img-list{margin: 10px 5px;}
 .img-list li{position: relative;display: inline-block;width: 100px;height: 100px;margin: 5px 5px 20px 5px;border: 1px solid rgb(100,149,198);background: #fff no-repeat center;background-size: cover;}
 .progress{position: absolute;width: 100%;height: 20px;line-height: 20px;bottom: 0;left: 0;background-color:rgba(100,149,198,.5);}
 .progress span{display: block;width: 0;height: 100%;background-color:rgb(100,149,198);text-align: center;color: #FFF;font-size: 13px;}
 .size{position: absolute;width: 100%;height: 15px;line-height: 15px;bottom: -18px;text-align: center;font-size: 13px;color: #666;}
 .tips{display: block;text-align:center;font-size: 13px;margin: 10px;color: #999;}
 .pic-list{margin: 10px;line-height: 18px;font-size: 13px;}
 .pic-list a{display: block;margin: 10px 0;}
 .pic-list a img{vertical-align: middle;max-width: 30px;max-height: 30px;margin: -4px 0 0 10px;}
 </style>
</head>
<body>
<input type="file" id="choose" accept="image/*" multiple>
<ul class="img-list"></ul>
<a id="upload">上传图片</a>
<span class="tips">只允许上传jpg、png及gif</span>
<div class="pic-list">
 你上传的图片(图片有效期为1分钟):
</div>
 
<script src="/public/jquery-2.1.1.min.js"></script>
<script>
 var filechooser = document.getElementById("choose");
 // 用于压缩图片的canvas
 var canvas = document.createElement("canvas");
 var ctx = canvas.getContext('2d');
 // 瓦片canvas
 var tCanvas = document.createElement("canvas");
 var tctx = tCanvas.getContext("2d");
 var maxsize = 100 * 1024;
 $("#upload").on("click", function() {
  filechooser.click();
  })
  .on("touchstart", function() {
  $(this).addClass("touch")
  })
  .on("touchend", function() {
  $(this).removeClass("touch")
  });
 filechooser.onchange = function() {
 if (!this.files.length) return;
 var files = Array.prototype.slice.call(this.files);
 if (files.length > 9) {
  alert("最多同时只可上传9张图片");
  return;
 }
 files.forEach(function(file, i) {
  if (!/\/(?:jpeg|png|gif)/i.test(file.type)) return;
  var reader = new FileReader();
  var li = document.createElement("li");
//   获取图片大小
  var size = file.size / 1024 > 1024 ? (~~(10 * file.size / 1024 / 1024)) / 10 + "MB" : ~~(file.size / 1024) + "KB";
  li.innerHTML = '<div class="progress"><span></span></div><div class="size">' + size + '</div>';
  $(".img-list").append($(li));
  reader.onload = function() {
  var result = this.result;
  var img = new Image();
  img.src = result;
  $(li).css("background-image", "url(" + result + ")");
  //如果图片大小小于100kb,则直接上传
  if (result.length <= maxsize) {
   img = null;
   upload(result, file.type, $(li));
   return;
  }
//  图片加载完毕之后进行压缩,然后上传
  if (img.complete) {
   callback();
  } else {
   img.onload = callback;
  }
  function callback() {
   var data = compress(img);
   upload(data, file.type, $(li));
   img = null;
  }
  };
  reader.readAsDataURL(file);
 })
 };
 // 使用canvas对大图片进行压缩
 function compress(img) {
 var initSize = img.src.length;
 var width = img.width;
 var height = img.height;
 //如果图片大于四百万像素,计算压缩比并将大小压至400万以下
 var ratio;
 if ((ratio = width * height / 4000000) > 1) {
  ratio = Math.sqrt(ratio);
  width /= ratio;
  height /= ratio;
 } else {
  ratio = 1;
 }
 canvas.width = width;
 canvas.height = height;
//  铺底色
 ctx.fillStyle = "#fff";
 ctx.fillRect(0, 0, canvas.width, canvas.height);
 //如果图片像素大于100万则使用瓦片绘制
 var count;
 if ((count = width * height / 1000000) > 1) {
  count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片
//   计算每块瓦片的宽和高
  var nw = ~~(width / count);
  var nh = ~~(height / count);
  tCanvas.width = nw;
  tCanvas.height = nh;
  for (var i = 0; i < count; i++) {
  for (var j = 0; j < count; j++) {
   tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);
   ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
  }
  }
 } else {
  ctx.drawImage(img, 0, 0, width, height);
 }
 //进行最小压缩
 var ndata = canvas.toDataURL('image/jpeg', 0.1);
 console.log('压缩前:' + initSize);
 console.log('压缩后:' + ndata.length);
 console.log('压缩率:' + ~~(100 * (initSize - ndata.length) / initSize) + "%");
 tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
 return ndata;
 }
 // 图片上传,将base64的图片转成二进制对象,塞进formdata上传
 function upload(basestr, type, $li) {
 var text = window.atob(basestr.split(",")[1]);
 var buffer = new Uint8Array(text.length);
 var pecent = 0, loop = null;
 for (var i = 0; i < text.length; i++) {
  buffer[i] = text.charCodeAt(i);
 }
 var blob = getBlob([buffer], type);
 var xhr = new XMLHttpRequest();
 var formdata = getFormData();
 formdata.append('imagefile', blob);
 xhr.open('post', '/cupload');
 xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
  var jsonData = JSON.parse(xhr.responseText);
  var imagedata = jsonData[0] || {};
  var text = imagedata.path ? '上传成功' : '上传失败';
  console.log(text + ':' + imagedata.path);
  clearInterval(loop);
  //当收到该消息时上传完毕
  $li.find(".progress span").animate({'width': "100%"}, pecent < 95 ? 200 : 0, function() {
   $(this).html(text);
  });
  if (!imagedata.path) return;
  $(".pic-list").append('<a href="' + imagedata.path + '" rel="external nofollow" >' + imagedata.name + '(' + imagedata.size + ')<img src="' + imagedata.path + '" /></a>');
  }
 };
 //数据发送进度,前50%展示该进度
 xhr.upload.addEventListener('progress', function(e) {
  if (loop) return;
  pecent = ~~(100 * e.loaded / e.total) / 2;
  $li.find(".progress span").css('width', pecent + "%");
  if (pecent == 50) {
  mockProgress();
  }
 }, false);
 //数据后50%用模拟进度
 function mockProgress() {
  if (loop) return;
  loop = setInterval(function() {
  pecent++;
  $li.find(".progress span").css('width', pecent + "%");
  if (pecent == 99) {
   clearInterval(loop);
  }
  }, 100)
 }
 xhr.send(formdata);
 }
 /**
 * 获取blob对象的兼容性写法
 * @param buffer
 * @param format
 * @returns {*}
 */
 function getBlob(buffer, format) {
 try {
  return new Blob(buffer, {type: format});
 } catch (e) {
  var bb = new (window.BlobBuilder || window.WebKitBlobBuilder || window.MSBlobBuilder);
  buffer.forEach(function(buf) {
  bb.append(buf);
  });
  return bb.getBlob(format);
 }
 }
 /**
 * 获取formdata
 */
 function getFormData() {
 var isNeedShim = ~navigator.userAgent.indexOf('Android')
  && ~navigator.vendor.indexOf('Google')
  && !~navigator.userAgent.indexOf('Chrome')
  && navigator.userAgent.match(/AppleWebKit\/(\d+)/).pop() <= 534;
 return isNeedShim ? new FormDataShim() : new FormData()
 }
 /**
 * formdata 补丁, 给不支持formdata上传blob的android机打补丁
 * @constructor
 */
 function FormDataShim() {
 console.warn('using formdata shim');
 var o = this,
  parts = [],
  boundary = Array(21).join('-') + (+new Date() * (1e16 * Math.random())).toString(36),
  oldSend = XMLHttpRequest.prototype.send;
 this.append = function(name, value, filename) {
  parts.push('--' + boundary + '\r\nContent-Disposition: form-data; name="' + name + '"');
  if (value instanceof Blob) {
  parts.push('; filename="' + (filename || 'blob') + '"\r\nContent-Type: ' + value.type + '\r\n\r\n');
  parts.push(value);
  }
  else {
  parts.push('\r\n\r\n' + value);
  }
  parts.push('\r\n');
 };
 // Override XHR send()
 XMLHttpRequest.prototype.send = function(val) {
  var fr,
   data,
   oXHR = this;
  if (val === o) {
  // Append the final boundary string
  parts.push('--' + boundary + '--\r\n');
  // Create the blob
  data = getBlob(parts);
  // Set up and read the blob into an array to be sent
  fr = new FileReader();
  fr.onload = function() {
   oldSend.call(oXHR, fr.result);
  };
  fr.onerror = function(err) {
   throw err;
  };
  fr.readAsArrayBuffer(data);
  // Set the multipart content type and boudary
  this.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);
  XMLHttpRequest.prototype.send = oldSend;
  }
  else {
  oldSend.call(this, val);
  }
 };
 }
</script>
</body>
</html>

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

Javascript 相关文章推荐
JavaScript 入门·JavaScript 具有全范围的运算符
Oct 01 Javascript
JavaScript动态调整TextArea高度的代码
Dec 28 Javascript
jquery防止重复执行动画避免页面混乱
Apr 22 Javascript
用javascript读取xml文件读取节点数据
Aug 12 Javascript
EasyUI实现二级页面的内容勾选的方法
Mar 01 Javascript
JavaScript动态加载样式表的方法
Mar 21 Javascript
Jquery on方法绑定事件后执行多次的解决方法
Jun 02 Javascript
js简单正则验证汉字英文及下划线的方法
Nov 28 Javascript
基于javascript实现的快速排序
Dec 02 Javascript
基于jquery实现左右上下移动效果
May 02 jQuery
用react-redux实现react组件之间数据共享的方法
Jun 08 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
Jun 24 Javascript
微信小程序报错:this.setData is not a function的解决办法
Sep 27 #Javascript
EasyUI Tree树组件无限循环的解决方法
Sep 27 #Javascript
详解微信小程序Page中data数据操作和函数调用
Sep 27 #Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
Sep 27 #Javascript
微信小程序中button组件的边框设置的实例详解
Sep 27 #Javascript
使用javaScript实现鼠标拖拽事件
Apr 03 #Javascript
vue-cli项目中怎么使用mock数据
Sep 27 #Javascript
You might like
第十三节--对象串行化
2006/11/16 PHP
PHP 伪静态隐藏传递参数名的四种方法
2010/02/22 PHP
Thinkphp实现短信验证注册功能
2016/10/18 PHP
读jQuery之三(构建选择器)
2011/06/11 Javascript
js jquery验证银行卡号信息正则学习
2013/01/21 Javascript
不同Jquery版本引发的问题解决
2013/10/14 Javascript
js判断当前浏览器类型,判断IE浏览器方法
2014/06/02 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
2015/03/04 Javascript
JS中产生标识符方式的演变
2015/06/12 Javascript
基于Vuejs实现购物车功能
2016/08/02 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
2016/09/23 Javascript
微信端开发--登录小程序步骤
2017/01/11 Javascript
javascript简单链式调用案例分析
2017/05/10 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
jQuery实现的弹幕效果完整实例
2017/09/06 jQuery
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
2018/03/05 Javascript
浅谈如何使用webpack构建多页面应用
2018/05/30 Javascript
深入学习JavaScript 高阶函数
2019/06/11 Javascript
Python 代码性能优化技巧分享
2012/08/07 Python
在Python中使用NLTK库实现对词干的提取的教程
2015/04/08 Python
Python安装Numpy和matplotlib的方法(推荐)
2017/11/02 Python
Python matplotlib绘图可视化知识点整理(小结)
2018/03/16 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
使用Python更换外网IP的方法
2018/07/09 Python
几款好用的python工具库(小结)
2020/10/20 Python
利用CSS3的transition属性实现滑动效果
2015/08/05 HTML / CSS
澳大利亚正品化妆品之家:Cosmetic Capital
2017/07/03 全球购物
最好的商品表达自己:Cafepress
2019/09/04 全球购物
大二自我鉴定范文
2013/10/05 职场文书
初三学习决心书
2014/03/11 职场文书
减负增效提质方案
2014/05/23 职场文书
文艺晚会策划方案
2014/06/11 职场文书
党校个人总结
2015/03/04 职场文书
2015年教师工作总结范文
2015/03/31 职场文书
小学教师工作总结2015
2015/04/07 职场文书
医护人员继续教育学习心得体会
2016/01/19 职场文书