JS多张图片压缩上传
前言代码结尾前言
最近在做的项目里有个关于多图片上传的，搞得我很久，查了很多资料，终于搞定，故此写一篇总结。
代码
前台我用的是jquery-1.8.3.min.js
html：
<div id="inputBox"><input type="file" title="请选择图片" id="file" multiple accept="image/png,image/jpg,image/gif,image/JPEG" onchange="addPhoto()"/>点击选择图片</div><div id="imgBox"></div>
js：
因为上传的图片要求不限制大小，就用了canvas压缩，再将base64转换为file放入文件流imgFile字段中，涉及到IE兼容问题就用了先将base64转换为blob再将blob转换为file。其中addNewContent方法实现预览效果，删除方法中的ajax会在下文提及。
var imgSrc = []; //图片路径var imgFile = []; //文件流var imgName = []; //图片名字//压缩图片方法function compressImg(file){var src;var fileSize = parseFloat(parseInt(file['size'])/1024/1024).toFixed(2);var read = new FileReader();read.readAsDataURL(file);read.onload = function (e) {var img = new Image();img.src = e.target.result;img.onload = function(){//默认按比例压缩var w = this.width,h = this.height;//生成canvasvar canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');var base64;// 创建属性节点canvas.setAttribute("width", w);canvas.setAttribute("height", h);ctx.drawImage(this, 0, 0, w, h);if(fileSize<1){console.log("1");//如果图片小于一兆 那么不执行压缩操作base64 = canvas.toDataURL(file['type'], 1);}else if(fileSize>1&&fileSize<2){console.log("0.5");//如果图片大于1M并且小于2M 那么压缩0.5base64 = canvas.toDataURL(file['type'], 0.5);}else{console.log("0.2");//如果图片超过2m 那么压缩0.2base64 = canvas.toDataURL(file['type'], 0.2);}// 回调函数返回file的值// callback(base64);var blob = dataURLtoBlob(base64);var files = blobToFile(blob, imgName);imgFile.push(files);};};};//将base64转换为blobfunction dataURLtoBlob(dataurl) {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 Blob([u8arr], {type: mime });};//将blob转换为filefunction blobToFile(theBlob, fileName){theBlob.lastModifiedDate = new Date();theBlob.name = fileName;return theBlob;}function addPhoto() {var fileImg = $("#file")[0];var fileList = fileImg.files;for(var i = 0; i < fileList.length; i++) {var imgSrcI = getObjectURL(fileList[i]);imgName.push(fileList[i].name);imgSrc.push(imgSrcI);compressImg(fileList[i]);}addNewContent("#imgBox");}function addNewContent(obj) {$("#imgBox").html("");for(var a = 0; a < imgSrc.length; a++) {var oldBox = $(obj).html();$(obj).html(oldBox + '<div class="imgContainer"><img title=' + imgName[a] + ' alt=' + imgName[a] + ' src=' + imgSrc[a] + ' οnclick="imgDisplay(this)"><p οnclick="removeImg(this,' + a + ')" class="imgDelete">删除</p></div>');}}//删除function removeImg(obj, index) {console.log("imgSrc="+imgSrc.length);console.log("imgFile="+imgFile.length);console.log("imgName="+imgName.length);if(imgFile[index]==""){console.log("id="+imgName);var id = imgName[index];$.ajax({type: "post",url: "<%=request.getContextPath()%>/member/trade/doDelPicture.html",dataType: "json",data: {id: id},success: function (data) {if(data==0){console.log("删除成功！id："+id);}}});}imgSrc.splice(index, 1);imgFile.splice(index, 1);imgName.splice(index, 1);var boxId = "#" + $(obj).parent('.imgContainer').parent().attr("id");addNewContent(boxId);}//限制图片个数function limitNum(num){if(!num){return true;}else if(imgFile.length>num){return false;}else{return true;}}//图片灯箱function imgDisplay(obj) {var src = $(obj).attr("src");var imgHtml = '<div style="width: 100%;height: 100vh;overflow: auto;background: rgba(0,0,0,0.5);text-align: center;position: fixed;top: 0;left: 0;z-index: 1000;"><img src=' + src + ' style="margin-top: 100px;width: 70%;margin-bottom: 100px;"/><p style="font-size: 50px;position: fixed;top: 30px;right: 30px;color: white;cursor: pointer;" οnclick="closePicture(this)">×</p></div>'$('body').append(imgHtml);}//关闭function closePicture(obj) {$(obj).parent("div").remove();}//图片预览路径function getObjectURL(file) {var url = null;if(window.createObjectURL != undefined) {// basicurl = window.createObjectURL(file);} else if(window.URL != undefined) {// mozilla(firefox)url = window.URL.createObjectURL(file);} else if(window.webkitURL != undefined) {// webkit or chromeurl = window.webkitURL.createObjectURL(file);}return url;}
在写上传前，先写初始时就有几张图片需要显示的情况。该情况需要将后台的图片在前台显示：
@RequestMapping(value = "/member/trade/viewPhoto")@ResponseBodypublic void viewPhoto(HttpServletRequest request, HttpServletResponse response) throws IOException {String id = request.getParameter("id"); //前端传来的图片idbyte[] bookPicture = deliveryOrderService.findPicture(id); //获得bookPictureresponse.setContentType("image/jpeg"); //设置图片格式OutputStream out = response.getOutputStream(); //打开输出流if(bookPicture!=null){out.write(bookPicture); //输出图片}out.flush();//输出out.close(); //关闭输出}
前台初始化：
member/trade/getPhotoId为获取图片ID的ajax调用，这里就不多赘述。注意：这里获取到的只是图片的src路径，没有文件流，所以imgFile.push("");也因此删除图片时要判断图片是否是后台传来的图片if(imgFile[index]=="")，如果是后台传来的图片就需要调用一下后台，将后台的图片一并删除
$(function(){var id = $("[name=id]").val();var contextPath = $("[name=contextPath]").val();$.ajax({type: "post",url: "<%=request.getContextPath()%>/member/trade/getPhotoId.html",dataType: "json",data: {id: id},success: function (data) {data = eval(data);var msg = data.message;var basePath = data.result;$.each(msg, function (n, value) {console.log(n + '---' + value);var src = basePath+"member/trade/viewPhoto.html?id="+value;imgName.push(value);imgSrc.push(src);imgFile.push("");console.log(imgSrc);});addNewContent("#imgBox");}});})
也因此在做上传时只需要一起上传前台上传的图片，也就是imgFile文件流：注意文件上传的form便签<form id="addPickgoodsMain" method="post" enctype="multipart/form-data">
function doSubmit(state){if(imgFile.length==0&&state==2 ){alert("请选择上传的文件!");return ;}if(!limitNum(100)){alert("超过图片上传限制");return;}if (!window.confirm('确定执行此操作吗?')) {return;}var formData = new FormData(document.getElementById('addPickgoodsMain'));var param=$("#addPickgoodsMain").serializeJson();param = JSON.stringify(param);console.log(param);formData.append("param",param);for(var i=0;i<imgFile.length;i++){formData.append("file1"+i+"[]",imgFile[i]);}$.ajax({type: "POST",url: "<%=request.getContextPath()%>/member/trade/orderEdit_signature.html",data: formData,async : false,contentType: false,processData: false,success: function(data) {if(data == '0') {alert("操作成功！")}else{alert("操作失败！")}}});}
后台接收用到CommonsMultipartResolver来获取请求中的文件流：
public void doAttchmentSave(HttpServletRequest request) throws IOException {CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());//判断 request 是否有文件上传,即多部分请求if (multipartResolver.isMultipart(request)) {//转换成多部分requestMultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;//取得request中的所有文件名Iterator<String> iter = multiRequest.getFileNames();while (iter.hasNext()) {//取得上传文件MultipartFile file = multiRequest.getFile(iter.next());if(file != null){//取得当前上传文件的文件名称String myFileName = file.getOriginalFilename();//如果名称不为空,说明该文件存在，否则说明该文件不存在if(!"".equals(myFileName.trim())){/**这里进行文件处理！！！*/}}}}}
结尾
到此，功能就结束了，第一次写博客，有什么不对的地方欢迎指出。希望对大家有用~~~~
