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 相关文章推荐
多个iframe自动调整大小的问题
Sep 18 Javascript
javascript 类定义的4种方法
Sep 12 Javascript
删除节点的jquery代码
Jan 13 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
Apr 03 Javascript
jquery得到iframe src属性值的方法
Sep 25 Javascript
jQuery 中$(this).index与$.each的使用指南
Nov 20 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
Jan 13 Javascript
javascript删除数组重复元素的方法汇总
Jun 24 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 Javascript
React 使用browserHistory项目访问404问题解决
Jun 01 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
Oct 16 Javascript
layui在form表单页面通过Validform加入简单验证的方法
Sep 06 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
PHP实现检测客户端是否使用代理服务器及其匿名级别
2015/01/07 PHP
php基于session实现数据库交互的类实例
2015/08/03 PHP
laravel框架中间件 except 和 only 的用法示例
2019/07/12 PHP
解决PHP curl或file_get_contents下载图片损坏或无法打开的问题
2019/10/11 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
网页javascript精华代码集
2007/01/24 Javascript
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
javascript转换字符串为dom对象(字符串动态创建dom)
2010/05/10 Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
2012/02/07 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
JS调试必备的5个debug技巧
2014/03/07 Javascript
js触发onchange事件的方法说明
2014/03/08 Javascript
Jquery自定义button按钮的几种方法
2014/06/11 Javascript
javascript函数声明和函数表达式区别分析
2014/12/02 Javascript
jQuery中each()方法用法实例
2014/12/27 Javascript
JavaScript实现的多个图片广告交替显示效果代码
2015/09/04 Javascript
jquery实现简单的遮罩层
2016/01/08 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
如何基于jQuery实现五角星评分
2020/09/02 jQuery
原生js实现购物车
2020/09/23 Javascript
[02:11]2016国际邀请赛中国区预选赛最美TA采访现场玩家
2016/06/28 DOTA
python对文件目录的操作方法实例总结
2019/06/24 Python
python中将两组数据放在一起按照某一固定顺序shuffle的实例
2019/07/15 Python
python画环形图的方法
2020/03/25 Python
python中导入 train_test_split提示错误的解决
2020/06/19 Python
一些关于python 装饰器的个人理解
2020/08/31 Python
国外软件测试工程师面试题
2016/12/09 面试题
职业生涯规划书的格式
2013/12/29 职场文书
大学生蛋糕店创业计划书
2014/01/13 职场文书
结婚邀请函范文
2014/01/14 职场文书
酒店总经理助理职责
2014/02/12 职场文书
美容院营销方案
2014/03/05 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
工作收入证明模板
2015/06/12 职场文书
小程序实现侧滑删除功能
2022/06/25 Javascript