input file 上传图片及压缩
大致需求为：可上传图片，同时压缩图片大小（因为手机图片一般都会有几兆，原图上传会耗损过多资源）；并且可以上传之后显示出来 ，再提交给服务器；
<input id="shangchuanimg" title="" type="file" name="file" value="" onChange="showImage(this)" /><ul class="ul"> 上传之后的图片矩阵 </div>
压缩的思路是创建一个图片，将file等于这个图片，然后创建一个canvas图层 ，将canvas等比例缩放，然后用canvas的drawImage将图片与canvas合起来，然后在转成吧canvas的base64转成file即可
function showImage(file, id) {if (file.files && file.files[0]) {for (let i = 0; i < file.files.length; i++) {console.log(file.files[i]) //拿到file对象let reader = new FileReader(); //读取filereader.readAsDataURL(file.files[i]);reader.onloadend = function(e) {let image = new Image() //新建一个img标签（还没嵌入DOM节点)image.src = e.target.result //将图片的路径设成file路径image.onload = function() {//压缩的思路是创建一个图片，将file等于这个图片，然后创建一个canvas图层 ，将canvas等比例缩放，然后用canvas的drawImage将图片与canvas合起来，然后在转成吧canvas的base64转成file即可let canvas = document.createElement('canvas'), context = canvas.getContext('2d'),imageWidth = image.width / 10, //压缩后图片的大小imageHeight = image.height / 10,data = ''canvas.width = imageWidthcanvas.height = imageHeightcontext.drawImage(image, 0, 0, imageWidth, imageHeight)data = canvas.toDataURL('image/jpeg')console.log(dataURLtoFile(data,'a'+imgnum))//压缩完成 var newfile = dataURLtoFile(data,'a'+imgnum+'.png');var formFile = new FormData();formFile.append('files', newfile );//ajax()....ajax上传file}//上传之后预览小图$('.pz').before('<li class="fileimg isfile dis" num=' + first + '>' +'<img src=' + reader.result + ' alt="">' +'<span class="isclick"></span>' +'</li>')$('.ok').text('上传(' + imgnum + ')')}}}}function dataURLtoFile(dataurl, filename) {// base64转file对象var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);while(n--){u8arr[n] = bstr.charCodeAt(n);}return new File([u8arr], filename, {type:mime});}
