前端页面
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--<meta http-equiv="Content-Type"; content="multipart/form-data; charset=utf-8"/>--> <title>多图片上传</title> <script type="text/javascript" src="${ctxPath}/static/js/jquery.min.js?v=2.1.4"></script> <style type="text/css"> *{ margin: 0; padding: 0; } #upBox{ text-align: center; width:500px; padding: 20px; border: 1px solid #666; margin: auto; margin-top: 150px; margin-bottom: 200px; position: relative; border-radius: 10px; } #inputBox{ width: 100%; height: 40px; border: 1px solid cornflowerblue; color: cornflowerblue; border-radius: 20px; position: relative; text-align: center; line-height: 40px; overflow: hidden; font-size: 16px; } #inputBox input{ width: 114%; height: 40px; opacity: 0; cursor: pointer; position: absolute; top: 0; left: -14%; } #imgBox{ text-align: left; } .imgContainer{ display: inline-block; width: 32%; height: 150px; margin-left: 1%; border: 1px solid #666666; position: relative; margin-top: 30px; box-sizing: border-box; } .imgContainer img{ width: 100%; height: 150px; cursor: pointer; } .imgContainer p{ position: absolute; bottom: -1px; left: 0; width: 100%; height: 30px; background: black; text-align: center; line-height: 30px; color: white; font-size: 16px; font-weight: bold; cursor: pointer; display: none; } .imgContainer:hover p{ display: block; } #btn{ outline: none; width: 100px; height: 30px; background: cornflowerblue; border: 1px solid cornflowerblue; color: white; cursor: pointer; margin-top: 30px; border-radius: 5px; } </style> </head> <body> <div style=" 100%;height: 100vh;position: relative;"> <div id="upBox"> <div id="inputBox"><input type="file" name="file" title="请选择图片" id="file" multiple accept="image/png,image/jpg,image/gif,image/JPEG" />点击选择图片</div> <div id="imgBox"> </div> <button id="btn">上传</button> </div> </div><script src="${ctxPath}/static/modular/ies/uploadImg.js" type="text/javascript" charset="utf-8"></script>//多图上传的js路径 <script type="text/javascript"> imgUpload({ inputId:'file', //input框id imgBox:'imgBox', //图片容器id buttonId:'btn', //提交按钮id upUrl:'/examinationRecords/uploadExaminationPhoto', //提交地址 data:'file1', //参数名 num:"10"//最多上传图片个数 }) </script> </body> </html>
uploadImg.js代码
1 var imgSrc = []; //图片路径 2 var imgFile = []; //文件流 3 var imgName = []; //图片名字 4 //选择图片 5 function imgUpload(obj) { 6 var oInput = '#' + obj.inputId; 7 var imgBox = '#' + obj.imgBox; 8 var btn = '#' + obj.buttonId; 9 $(oInput).on("change", function() { 10 var fileImg = $(oInput)[0]; 11 var fileList = fileImg.files; 12 for(var i = 0; i < fileList.length; i++) { 13 var imgSrcI = getObjectURL(fileList[i]); 14 imgName.push(fileList[i].name); 15 imgSrc.push(imgSrcI); 16 imgFile.push(fileList[i]); 17 } 18 addNewContent(imgBox); 19 }) 20 $(btn).on('click', function() { 21 var len = imgFile.length; 22 var file=[]; 23 //alert(len); 24 var formData = new FormData(); 25 for (var i = 0; i < len; i++) { 26 27 formData.append('file',imgFile[i]); 28 29 } 30 /** 31 * ajax上传，new一个formData对象传递照片数组 32 */ 33 $.ajax({ 34 url:'/uploadPhoto', 35 type:'post', 36 processData:false, 37 contentType:false, 38 data:formData, 39 //traditional: true, 40 success:function (data) { 41 42 alert("上传成功"); 43 }, 44 error:function(data){ 45 46 alert("上传失败"); 47 } 48 }) 49 }) 50 } 51 //图片展示 52 function addNewContent(obj) { 53 $(imgBox).html(""); 54 for(var a = 0; a < imgSrc.length; a++) { 55 var oldBox = $(obj).html(); 56 $(obj).html(oldBox + '<div class="imgContainer"><img title=' + imgName[a] + ' alt=' + imgName[a] + ' src=' + imgSrc[a] + ' onclick="imgDisplay(this)"><p onclick="removeImg(this,' + a + ')" class="imgDelete">删除</p></div>'); 57 } 58 } 59 //删除 60 function removeImg(obj, index) { 61 imgSrc.splice(index, 1); 62 imgFile.splice(index, 1); 63 imgName.splice(index, 1); 64 var boxId = "#" + $(obj).parent('.imgContainer').parent().attr("id"); 65 addNewContent(boxId); 66 } 67 68 //图片灯箱 69 function imgDisplay(obj) { 70 var src = $(obj).attr("src"); 71 var imgHtml = '<div style=" 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; 70%;margin-bottom: 100px;"/><p style="font-size: 50px;position: fixed;top: 30px;right: 30px;color: white;cursor: pointer;" onclick="closePicture(this)">×</p></div>' 72 $('body').append(imgHtml); 73 } 74 //关闭 75 function closePicture(obj) { 76 $(obj).parent("div").remove(); 77 } 78 79 //图片预览路径 80 function getObjectURL(file) { 81 var url = null; 82 if(window.createObjectURL != undefined) { // basic 83 url = window.createObjectURL(file); 84 } else if(window.URL != undefined) { // mozilla(firefox) 85 url = window.URL.createObjectURL(file); 86 } else if(window.webkitURL != undefined) { // webkit or chrome 87 url = window.webkitURL.createObjectURL(file); 88 } 89 return url; 90 } 91 92
后台controller层
1 /** 2 * 上传考场记录照片 3 * @param request 4 * @return 5 */ 6 @RequestMapping("/uploadExaminationPhoto") 7 @ResponseBody 8 public Object uploadImg(HttpServletRequest request) { 9 10 MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest) request; 11 List<MultipartFile> fileList = multipartHttpServletRequest.getFiles("file"); 12 byte[] uploadExaminationPhoto = saveImg(f);
这里一个bug调到崩溃，开始用HttpRequest接收不到参数，改ajax请求，改页面，我能用的方法都用了，后来调用HttpServletRequest解决，猜测问题出在HttpServletRequest 和HttpRequest传递参数类型（文件和文件数组）的差异，
MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest) request;
saveImg方法
/** * 照片解析为数组 * @param file 照片文件 * @return byte数组 * @author xWang * @Date 2019-07-03 */ protected byte[] saveImg(MultipartFile file){ byte data[]=null; try { InputStream ins = file.getInputStream(); byte[] buffer=new byte[1024]; int len=0; ByteArrayOutputStream bos=new ByteArrayOutputStream(); while((len=ins.read(buffer))!=-1){ bos.write(buffer,0,len); } bos.flush(); data = bos.toByteArray(); } catch (Exception e) { // TODO Auto-generated catch block e.printStackTrace(); } return data; }
至此，照片解析为字节流，根据业务要求进行保存即可。
另：
最近新发现MultipartFile.transferTo(File dest)可以直接保存为文件，尴尬