项目里边这次用到了移动端上传图片，拿出来分享下。
1.首先是思路，在input 发生change的时候判断浏览器时候支持图片预览，支持的情况下校验图片的格式，图片的大小，之后将拿到的图片进行canvas压缩，图片转base64,然后上传。
2.代码
$(".file").on("change", function() { var that = $(this); //判断是否支持FileReader if(window.FileReader) { var reader = new FileReader(); } else { $(".u-pop").showTip("您的设备不支持图片预览功能，如需该功能请升级您的设备！", "", "确定"); } //获取文件 var file = $(this)[0].files[0]; var imageType = /^image\//; //是否是图片 if(!imageType.test(file.type)) { $(".u-pop").showTip("请选择正确图片！", "", "确定"); return; } if(file.size / 1024 / 1024 > 5) { $(".u-pop").showTip("图片不能大于5M！", "", "确定"); return; } if(imglength == 4) { that.parent().hide(); } //读取完成 reader.onload = function(e) { var image = new Image(); image.src = e.target.result; //alert(e.target.result.length) var base64 = null; image.onload = function() { var expectWidth = this.naturalWidth; var expectHeight = this.naturalHeight; var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); canvas.width = expectWidth; canvas.height = expectHeight; ctx.drawImage(this, 0, 0, expectWidth, expectHeight, 0, 0, expectWidth, expectHeight); base64 = canvas.toDataURL("image/jpeg", 0.3);//0.3为降低的品质数 //alert(base64.length) //获取图片dom var section = document.createElement('section'); section.setAttribute("class", "up-section "); var imgdelete = document.createElement("img"); imgdelete.setAttribute("src", ""); var img = document.createElement("img"); var addimg = document.getElementsByClassName("addimg")[0] //图片路径设置为读取的图片 img.src = base64; img.className = "up-img"; section.appendChild(img); that.parent().before(section); }; }; reader.readAsDataURL(file); });3.请求后台接口
var files = list.eq(i).find(".slides-show img"); var fd = new Array(); for(var j = 0; j < files.length; j++) { fd[j] = files[j].src; }; $.ajax({ url: xxx, type: 'post', data: { token: token, datalist: fd }, traditional: true,//fd为数组是需要加 //processData: false, //contentType: false, success: function(data) { $(".u-pop").showTip(" 评价成功！"); var t = setTimeout(function() { window.history.go(-1); clearTimeout(t); }, 1000); }, error: function(e) { $(".u-pop").showTip("评价失败", "", "确定"); } });不足知促没有用formdata做二进制的处理，原因后端暂时不支持。
