springboot 單個input多圖片上傳
阿新 • • 發佈：2019-02-07
uploadImg.js<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>一個input實現多圖片上傳</title> <script src="js/jquery.min.js"></script> <script src="js/uploadImg.js"></script> <style type="text/css"></style> <link rel="stylesheet" type="text/css" href="css/uploadImg.css"> </head> <body> <form action="" id="upBox"> 小區名字：<input name="areaName"> <div id="inputBox"> <input type="file" name="file" title="請選擇圖片" id="file" multiple="multiple" accept="image/png,image/jpg,image/gif,image/JPEG"/>選擇圖片 </div> <div id="imgBox"> </div> <button id="btn">上傳</button> </form> </body> <script type="text/javascript"> imgUpload({ inputId:'file', //input框id imgBox:'imgBox', //圖片容器id buttonId:'btn', //提交按鈕id upUrl:'/testController/uploadImg', //提交地址 data:'file', //引數名 num:"10"//最多上傳圖片個數 }) </script> </html>
var imgSrc = []; //存放圖片路徑 var imgFile = []; //存放檔案流 var imgName = []; //存放圖片名字 //選擇圖片的操作 function imgUpload(obj) { var oInput = '#' + obj.inputId; var imgBox = '#' + obj.imgBox; var btn = '#' + obj.buttonId; //用on是因為它可以動態的繫結事件 $(oInput).on("change", function() { //獲取type=file的input var fileImg = $(oInput)[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); //在檔案流陣列的末尾新增檔案 imgFile.push(fileList[i]); } //將圖片展示出去 addNewContent(imgBox); }) $(btn).on('click', function() { if(!limitNum(obj.num)){ alert("最多隻能上傳"+obj.num+"張照片!"); return false; } //用FormData物件上傳 var fd = new FormData($('#upBox')[0]); //由於fd物件中已經包含<input type='file'>的input標籤，如果不刪除，就會造成重複上傳 fd.delete("file"); //將檔案流迴圈新增到FormData物件中 for(var i=0;i<imgFile.length;i++){ fd.append(obj.data,imgFile[i]); } //上傳所有的圖片 submitPicture(obj.upUrl, fd); }) } //圖片展示 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] + ' onclick="imgDisplay(this)"><p onclick="removeImg(this,' + a + ')" class="imgDelete">刪除</p></div>'); } } //刪除 function removeImg(obj, index) { //向陣列中刪除元素 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 submitPicture(url,data) { for (var p of data) { console.log(p); } if(url&&data){ $.ajax({ type: "post", url: url, async: true, data: data, //下面這兩個要寫成false，要不然上傳不了。 processData: false, contentType: false, success: function(dat) { console.log(dat); } }); }else{ alert('資料格式不正確!'); } } //當滑鼠移到圖片上時，顯示x刪除 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;" onclick="closePicture(this)">×</p></div>' $('body').append(imgHtml); } //關閉 function closePicture(obj) { $(obj).parent("div").remove(); } //圖片預覽路徑 function getObjectURL(file) { var url = null; if(window.createObjectURL != undefined) { // basic url = window.createObjectURL(file); } else if(window.URL != undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file); } else if(window.webkitURL != undefined) { // webkit or chrome url = window.webkitURL.createObjectURL(file); } return url; }