多組input檔案，每組 multiple選擇多張圖片上傳可增刪其中任意一張圖片
阿新 • • 發佈：2018-12-10
input 、multiple選擇多張圖片時，需要刪除其中的一張圖片怎麼做，大家都知道 input 中的檔案是不能刪除和更改的，只能清空，這裡我的做法是 定義一個物件儲存器把需要的檔案存在儲存器中 formData，後臺不從Input中讀取，從物件儲存器中獲取檔案，一組圖片使用一個儲存器中formData，儲存器中的 key 我們用檔名加Input的ID 拼接，而後在取出來用 key 為Input的ID，存入所有的圖片，用ajax 需要sync: false,同步操作a與後臺互動，後臺根據 key 獲取所有圖片；
效果：
新增圖片：
刪除其中一張圖片：
重複圖片提示：
單圖片預覽：
圖片增刪 與後臺互動js：
assets/js/gm/add-GasCylinderCheckInfoAjaxfileupload.js
/*===========================================主頁證書檢視===================================================*/ $(document).ready(function() { }); //多圖片檢視 function showImg(urls) { var url = ""; if(null != urls && 0 < urls.length) { $("#showImg").val(urls); var url = urls.split(','); } if(null != url && url != ""){ popWin.showWin("1300","590","檢視證書",url); }else{ DJMask.msg("未獲取到資料請檢查！"); } } //單圖片檢視 function showImgD(url) { if(null != url && url != ""){ popWinD.showWin("600","590","檢視證書",url); }else{ DJMask.msg("未獲取到資料請檢查！"); } } /*function ass() { popWin.showWin("800","600","通用的iframe彈層外掛","http://www.jq22.com"); }*/ /*-------------------------------------------------上傳圖片，圖片顯示js,控制5張圖片------------------------------------------------------------------------*/ //取資料 /*產品合格證*/ /*對應圖片上傳input的ID*/ var fu1="productqualifyurlFile1"; /*圖片儲存器*/ var formData = new FormData(); var formData1 = new FormData(); /*（質量證明書）*/ /*對應圖片上傳input的ID*/ var fuA="qualitycertificateurlFile2"; /*圖片儲存器*/ var formDataA = new FormData(); var formDataA1 = new FormData(); /*（使用說明書）*/ /*對應圖片上傳input的ID*/ var fuB="instructionmanualurlFile2"; /*圖片儲存器*/ var formDataB = new FormData(); var formDataB1 = new FormData(); /*（檢驗報告）*/ /*對應圖片上傳input的ID*/ var fuC="inspectereporturlFile2" /*圖片儲存器*/ var formDataC = new FormData(); var formDataC1 = new FormData(); /*（日常檢驗記錄）*/ /*對應圖片上傳input的ID*/ var fuD="dailyinspectrecordurlFile2"; /*圖片儲存器*/ var formDataD = new FormData(); var formDataD1 = new FormData(); $(function () { var delParent; var idFile; var defaults = { fileType: ["jpg", "png", "bmp", "jpeg", "JPG","PNG"], // 上傳檔案的型別 fileSize: 1024 * 1024 * 10 // 上傳檔案的大小 10M }; /*點選圖片的文字框*/ $("table").delegate(".file", "change", function () { /*獲取對應圖片上傳input的ID*/ idFile = $(this).attr("id")+""; /*獲取對應圖片集*/ var file = document.getElementById(idFile); var imgContainer = $(this).parents(".z_photo"); //存放圖片的父親元素 var fileList = file.files; //獲取的圖片檔案 console.log(fileList + "======filelist====="); var input = $(this).parent();//文字框的父親元素 var imgArr = []; //遍歷得到的圖片檔案 var numUp = imgContainer.find(".up-section").length; var totalNum = numUp + fileList.length; //總的數量 if (fileList.length > 5 || totalNum > 5) { //一次選擇上傳超過5個 或者是已經上傳和這次上傳的到的總數也不可以超過5個 DJMask.msg("上傳圖片數目不可以超過5個，請重新選擇！"); } else if (numUp < 5) { fileList = validateUp(fileList); for (var i = 0; i < fileList.length; i++) { var imgUrl = window.URL.createObjectURL(fileList[i]); imgArr.push(imgUrl); var $section = $("<section class='up-section fl loading'>"); imgContainer.prepend($section); var $span = $("<span class='up-span'>"); $span.appendTo($section); /* 刪除圖片*/ var $img0 = $("<img class='close-upimg'>").on("click", function (event) { event.preventDefault(); event.stopPropagation(); $(".works-mask").show(); delParent = $(this).parent(); var numUp = delParent.siblings().length; if (numUp < 6) { delParent.parent().find(".z_file").show(); } /* 獲取刪除圖片的圖片名*/ var fileName =$(this).parent().children(".img-name-p").text(); /* 獲取刪除圖片的input的ID*/ var idFile1 = $(this).parent(). nextAll(".z_file").children(".file").attr("id")+""; /* 判斷刪除圖片的input的ID是哪一組圖片，對應操作對應的圖片儲存器！*/ if(idFile1 == fu1){ formData.delete((fileName+idFile1)); formData.delete(idFile1); formData1.delete(idFile1); var i = formData.entries(); while(item = i.next()){ if(item.done) break; //因為物件裡儲存多個型別的圖片，需要區分圖片單獨增刪 if(item.value[0] != idFile1){ //將需要的圖片中轉一下，直接放formData這個裡可能會死循序 formData1.append(idFile1,item.value[1]); } } //遍歷中轉儲存器formDataA中的圖片 var y = formData1.entries(); while(item1 = y.next()){ if(item1.done) break; //加入formData儲存器中，key為input的ID formData.append(idFile1,item1.value[1]); } delParent.remove(); }else if(idFile1 == fuA){ formDataA.delete((fileName+idFile1)); formDataA.delete(idFile1); formDataA1.delete(idFile1); var i = formDataA.entries(); while(item = i.next()){ if(item.done) break; //因為物件裡儲存多個型別的圖片，需要區分圖片單獨增刪 if(item.value[0] != idFile1){ //將需要的圖片中轉一下，直接放formDataA這個裡可能會死循序 formDataA1.append(idFile1,item.value[1]); } } var y = formDataA1.entries(); while(item1 = y.next()){ if(item1.done) break; formDataA.append(idFile1,item1.value[1]); } delParent.remove(); }else if(idFile1 == fuB){ formDataB.delete((fileName+idFile1)); formDataB.delete(idFile1); formDataB1.delete(idFile1); var i = formDataB.entries(); while(item = i.next()){ if(item.done) break; //因為物件裡儲存多個型別的圖片，需要區分圖片單獨增刪 if(item.value[0] != idFile1){ formDataB1.append(idFile1,item.value[1]); } } var y = formDataB1.entries(); while(item1 = y.next()){ if(item1.done) break; formDataB.append(idFile1,item1.value[1]); } delParent.remove(); }else if(idFile1 == fuC){ formDataC.delete((fileName+idFile1)); formDataC.delete(idFile1); formDataC1.delete(idFile1); var i = formDataC.entries(); while(item = i.next()){ if(item.done) break; //因為物件裡儲存多個型別的圖片，需要區分圖片單獨增刪 if((item.value[0]+"") != idFile1){ formDataC1.append(idFile1,item.value[1]); } } var y = formDataC1.entries(); while(item1 = y.next()){ if(item1.done) break; formDataC.append(idFile1,item1.value[1]); } delParent.remove(); }else if(idFile1 == fuD){ formDataD.delete((fileName+idFile1)); formDataD.delete(idFile1); formDataD1.delete(idFile1); var i = formDataD.entries(); while(item = i.next()){ if(item.done) break; //因為物件裡儲存多個型別的圖片，需要區分圖片單獨增刪 if((item.value[0]+"") != idFile1){ formDataD1.append(idFile1,item.value[1]); } } var y = formDataD1.entries(); while(item1 = y.next()){ if(item1.done) break; formDataD.append(idFile1,item1.value[1]); } delParent.remove(); } }); /*刪除圖片按鈕*/ $img0.attr({"src":"/assets//upjs/img/a7.png"}).appendTo($section); /*單張圖片預覽*/ var $img = $("<a href=\"javascript:showImgD('"+imgArr[i]+"')\"><img class='up-img up-opcity' src='"+imgArr[i]+"'></a>"); /*var $img = $("<img class='up-img up-opcity' >");*/ $img.attr("src", imgArr[i]); $img.appendTo($section); var $p = $("<p class='img-name-p'>"); $p.html(fileList[i].name).appendTo($section); var $input = $("<input id='taglocation' name='taglocation' value='' type='hidden'>"); $input.appendTo($section); var $input2 = $("<input id='tags' name='tags' value='' type='hidden'/>"); $input2.appendTo($section); } } setTimeout(function () { $(".up-section").removeClass("loading"); $(".up-img").removeClass("up-opcity"); }, 450); numUp = imgContainer.find(".up-section").length; if (numUp >= 5) { $(this).parent().hide(); } }); $(".z_photo").delegate(".close-upimg", "click", function () { $(".works-mask").show(); delParent = $(this).parent(); }); $(".wsdel-ok").click(function () { $(".works-mask").hide(); var numUp = delParent.siblings().length; if (numUp < 6) { delParent.parent().find(".z_file").show(); } delParent.remove(); }); $(".wsdel-no").click(function () { $(".works-mask").hide(); }); function validateUp(files) { var arrFiles = [];//替換的檔案陣列 for (var i = 0, file; file = files[i]; i++) { //獲取檔案上傳的字尾名 var newStr = file.name.split("").reverse().join(""); if (newStr.split(".")[0] != null) { var type = newStr.split(".")[0].split("").reverse().join(""); console.log(type + "===type==="); if (jQuery.inArray(type, defaults.fileType) > -1) { // 型別符合，可以上傳 if (file.size >= defaults.fileSize) { DJMask.msg(file.size); DJMask.msg('您這個"' + file.name + '"檔案大小過大'); } else { // 在這裡需要判斷當前所有檔案中 //判斷 增加的圖片是哪個input 的ID，把圖片加入對應的圖片儲存器中 if(idFile == fu1){ //判斷 圖片儲存器中是否已存在該圖片，如果存在就不加入，並給與提示； if( !formData.has((file.name+idFile))) { formData.append((file.name + idFile), file); formData.append(idFile, file); arrFiles.push(file); }else{ DJMask.msg("檔案不能重複上傳！"); } }else if(idFile == fuA){ if( !formDataA.has((file.name+idFile))) { formDataA.append((file.name + idFile), file); formDataA.append(idFile, file); arrFiles.push(file); }else{ DJMask.msg("檔案不能重複上傳！"); } }else if(idFile == fuB){ if( !formDataB.has((file.name+idFile))) { formDataB.append((file.name + idFile), file); formDataB.append(idFile, file); arrFiles.push(file); }else{ DJMask.msg("檔案不能重複上傳！"); } }else if(idFile == fuC){ if( !formDataC.has((file.name+idFile))) { formDataC.append((file.name+idFile),file); formDataC.append(idFile,file); arrFiles.push(file); }else{ DJMask.msg("檔案不能重複上傳！"); } }else if(idFile == fuD){ if( !formDataD.has((file.name+idFile))) { formDataD.append((file.name+idFile),file); formDataD.append(idFile,file); arrFiles.push(file); }else{ DJMask.msg("檔案不能重複上傳！"); } } } } else { DJMask.msg('您這個"' + file.name + '"上傳型別不符合'); } } else { DJMask.msg('您這個"' + file.name + '"沒有型別, 無法識別'); } } return arrFiles; } }) /*================================================實現資料庫圖片上傳==================================================================*/ /*產品合格證*/ function ProductqualifyurlFileUpload() { /*產品合格證*/ $.ajax({ url: "/config/create-AllGasCylinderCheckInfoFileurlFileUpload", type: "POST", dataType: 'json', processData: false, contentType: false, data: formData, async: false, success: function(data){ if (data.resultCode == 200) { $("#productqualifyurl").val(data.fieldString); } if (data.resultCode == 505) { DJMask.msg("請圖片上傳失敗"); } }, error: function () { } }); } /*質量證書*/ function qualitycertificateurlFileUpload() { /*質量證書*/ $.ajax({ url: "/config/create-AllGasCylinderCheckInfoQualitycertificateurlFileUpload", type: "POST", dataType: 'json', processData: false, contentType: false, data: formDataA, async: false, success: function(data){ if (data.resultCode == 200) { $("#qualitycertificateurl").val(data.fieldString); } if(data.resultCode == 505){ DJMask.msg("請圖片上傳失敗"); } }, error: function () { } }); } /* 質量說明書*/ function ManufacturingSupervisionInsurFileUpload() { /* 質量說明書*/ $.ajax({ url: "/config/create-AllGasCylinderCheckInfoQualitycertificateurlFileUpload", type: "POST", dataType: 'json', processData: false, contentType: false, data: formData, async: false, success: function(data){ if (data.resultCode == 200) { $("#manufacturingsupervisioninsurl").val(data.fieldString); } if(data.resultCode == 505){ DJMask.msg("請圖片上傳失敗"); } }, error: function () { } }); } /* 使用說明書*/ function instructionmanualurlFileUpload() { $.ajax({ url: "/config/create-AllGasCylinderCheckInfoInstructionmanualurlUpload", type: "POST", dataType: 'json', processData: false, contentType: false, data: formDataB, async: false, success: function(data){ if (data.resultCode == 200) { $("#instructionmanualurl").val(data.fieldString); } if(data.resultCode == 505){ DJMask.msg("請圖片上傳失敗"); } }, error: function () { } }); } /* 檢驗報告*/ function InspectereporturlUpload() { $.ajax({ url: "/config/create-AllGasCylinderCheckInspectereporturlUpload", type: "POST", dataType: 'json', processData: false, contentType: false, data: formDataC, async: false, success: function(data){ if (data.resultCode == 200) { $("#inspectereporturl").val(data.fieldString); } if(data.resultCode == 505){ DJMask.msg("請圖片上傳失敗"); } }, error: function () { } }); } /* 日常檢驗記錄*/ function DailyinspectrecordurlUpload() { $.ajax({ url: "/config/create-AllGasCylinderCheckDailyinspectrecordurlUpload", type: "POST", dataType: 'json', processData: false, contentType: false, data: formDataD, async: false, success: function(data){ if (data.resultCode == 200) { $("#dailyinspectrecordurl").val(data.fieldString); } if(data.resultCode == 505){ DJMask.msg("請圖片上傳失敗"); } }, error: function () { } }); } /*==================================定檢證書檢視=============================================================*/ /*（產品合格證）*/ function lookProductqualifyurl(href) { /*var productqualifyurl = $("#productqualifyurl").val();*/ window.location.href = href; } /*（質量證明書）*/ function lookQualitycertificateurl(href) { /* var qualitycertificateurl = $("#qualitycertificateurl").val();*/ window.location.href = href; } /*質量說明書*/ function lookManufacturingsupervisioninsurl(href) { /*var manufacturingsupervisioninsurl = $("#manufacturingsupervisioninsurl").val();*/ window.location.href = href; } /*使用說明書*/ function lookinstructionmanualurl(href) { /*var instructionmanualurl = $("#instructionmanualurl").val();*/ window.location.href = href; } /*==================================上傳圖片（產品合格證url）=主頁上傳圖片，更新資料庫============================================================*/ function productqualifyurlUploadImage1(id, i) { var ajax1Dfd = $.Deferred(); var its_promise = $.when(ajax1Dfd); $("#gasCylinderCheckInfoId").val(id); var files = document.getElementById("productqualifyurlFile" + i + "").files; var f = document.getElementById("productqualifyurlFile" + i + "").value; if ((files.length-0) == 0) { DJMask.msg("請上傳圖片"); return false; }else if( 5 < (files.length-0) ){ DJMask.msg("圖片不能超過5張！"); return false; } else { if (f != null && !/\.(|jpg|jpeg|png|JPG|PNG)$/.test(f)) { DJMask.msg("圖片型別必須是.jpeg,jpg,png中的一種"); return false; } } DJMask.msg("請稍等正在處理！"); $.ajaxFileUpload({ url: "/config/add-GasCylinderCheckInfoProductqualifyurlUpload1?gasCylinderCheckInfoId=" + id + "&ii=" + i, /*data: {'id': id},*/ fileElementId: 'productqualifyurlFile' + i, dataType: "json", success: function (data) { if (200 == data.resultCode) { setTimeout(function(){ DJMask.msg(data.failDesc); },1500); setTimeout(function(){ ajax1Dfd.resolve(); },3000); its_promise.done(function(){ getAllpage(); }); } else { setTimeout(function(){ DJMask.msg(data.failDesc); },1500); DJMask.msg(data.failDesc); setTimeout(function(){ ajax1Dfd.resolve(); },3000); its_promise.done(function(){ getAllpage(); }); } } }); } /*==================================上傳圖片（質量證明書url）=主頁上傳圖片，更新資料庫============================================================*/ function qualitycertificateurlUploadImage1(id, i) { var ajax1Dfd = $.Deferred(); var its_promise = $.when(ajax1Dfd); $("#gasCylinderCheckInfoId").val(id); var files = document.getElementById("qualitycertificateurlFile" + i + "").files; var f = document.getElementById("qualitycertificateurlFile" + i + "").value; if ((files.length-0) == 0) { DJMask.msg("請上傳圖片"); return false; }else if( 5 < (files.length-0) ){ DJMask.msg("圖片不能超過5張！"); return false; } else { if (f != null && !/\.(|jpg|jpeg|png|JPG|PNG)$/.test(f)) { DJMask.msg("圖片型別必須是.jpeg,jpg,png中的一種"); return false; } } DJMask.msg("請稍等正在處理！"); $.ajaxFileUpload({ url: "/config/add-GasCylinderCheckInfoQualitycertificateurlUpload1?gasCylinderCheckInfoId=" + id + "&ii=" + i, /*data: {'id': id},*/ fileElementId: 'qualitycertificateurlFile' + i, dataType: "json", success: function (data) { if (200 == data.resultCode) { setTimeout(function(){ DJMask.msg(data.failDesc); },1500); setTimeout(function(){ ajax1Dfd.resolve(); },3000); its_promise.done(function(){ getAllpage(); }); } else { setTimeout(function(){ DJMask.msg(data.failDesc); },1500); DJMask.msg(data.failDesc); setTimeout(function(){ ajax1Dfd.resolve(); },3000); its_promise.done(function(){ getAllpage(); }); } } }); } /*==================================上傳圖片（質量說明書）=主頁上傳圖片，更新資料庫============================================================*/ function qualityspecifyurlUploadImage1(id, i) { var ajax1Dfd = $.Deferred(); var its_promise = $.when(ajax1Dfd); $("#gasCylinderCheckInfoId").val(id); var files = document.getElementById("qualityspecifyurlFile" + i + "").files; var f = document.getElementById("qualityspecifyurlFile" + i + "").value; if ((files.length-0) == 0) { DJMask.msg("請上傳圖片"); return false; }else if( 5 < (files.length-0) ){ DJMask.msg("圖片不能超過5張！"); return false; } else { if (f != null && !/\.(|jpg|jpeg|png|JPG|PNG)$/.test(f)) { DJMask.msg("圖片型別必須是.jpeg,jpg,png中的一種"); return false; } } DJMask.msg("請稍等正在處理！"); $.ajaxFileUpload({ url: "/config/add-GasCylinderCheckInfoQualityspecifyurlUpload1?gasCylinderCheckInfoId=" + id + "&ii=" + i, /*data: {'id': id},*/ fileElementId: 'qualityspecifyurlFile' + i, dataType: "json", success: function (data) { if (200 == data.resultCode) { setTimeout(function(){ DJMask.msg(data.failDesc); },1500); setTimeout(function(){ ajax1Dfd.resolve(); },3000); its_promise.done(function(){ getAllpage(); }); } else { setTimeout(function(){ DJMask.msg(data.failDesc); },1500); DJMask.msg(data.failDesc); setTimeout(function(){ ajax1Dfd.resolve(); },3000); its_promise.done(function(){ getAllpage(); }); } } }); } /*==================================上傳圖片（使用說明書url）=主頁上傳圖片，更新資料庫============================================================*/ function instructionmanualurlUploadImage1(id, i) { var ajax1Dfd = $.Deferred(); var its_promise = $.when(ajax1Dfd); $("#gasCylinderCheckInfoId").val(id); var files = document.getElementById("instructionmanualurlFile" + i + "").files; var f = document.getElementById("instructionmanualurlFile" + i + "").value; if ((files.length-0) == 0) { DJMask.msg("請上傳圖片"); return false; }else if( 5 < (files.length-0) ){ DJMask.msg("圖片不能超過5張！"); return false; } else { if (f != null && !/\.(|jpg|jpeg|png|JPG|PNG)$/.test(f)) { DJMask.msg("圖片型別必須是.jpeg,jpg,png中的一種"); return false; } } DJMask.msg("請稍等正在處理！"); $.ajaxFileUpload({ url: "/config/add-GasCylinderCheckInfoInstructionmanualurlUpload1?gasCylinderCheckInfoId=" + id + "&ii=" + i, /*data: {'id': id},*/ fileElementId: 'instructionmanualurlFile' + i, dataType: "json", success: function (data) { if (200 == data.resultCode) { setTimeout(function(){ DJMask.msg(data.failDesc); },1500); setTimeout(function(){ ajax1Dfd.resolve(); },3000); its_promise.done(function(){ getAllpage(); }); } else { setTimeout(function(){ DJMask.msg(data.failDesc); },1500); DJMask.msg(data.failDesc); setTimeout(function(){ ajax1Dfd.resolve(); },3000); its_promise.done(function(){ getAllpage(); }); } } }); } /*==================================================================================================================================================*/ /*==================================上傳圖片（檢驗報告）=主頁上傳圖片，更新資料庫============================================================*/ function inspectereporturlUploadImage1(id, i) { var ajax1Dfd = $.Deferred(); var its_promise = $.when(ajax1Dfd); $("#gasCylinderCheckInfoId").val(id); var files = document.getElementById("inspectereporturlFile" + i + "").files; var f = document.getElementById("inspectereporturlFile" + i + "").value; if ((files.length-0) == 0) { DJMask.msg("請上傳圖片"); return false; }else if( 5 < (files.length-0) ){ DJMask.msg("圖片不能超過5張！"); return false; } else { if (f != null && !/\.(|jpg|jpeg|png|JPG|PNG)$/.test(f)) { DJMask.msg("圖片型別必須是.jpeg,jpg,png中的一種"); return false; } } DJMask.msg("請稍等正在處理！"); $.ajaxFileUpload({ url: "/config/add-GasCylinderCheckInfoInspectereporturlUpload1?gasCylinderCheckInfoId=" + id + "&ii=" + i, /*data: {'id': id},*/ fileElementId: 'inspectereporturlFile' + i, dataType: "json", success: function (data) { if (200 == data.resultCode) { setTimeout(function(){ DJMask.msg(data.failDesc); },1500); setTimeout(function(){ ajax1Dfd.resolve(); },3000); its_promise.done(function(){ getAllpage(); }); } else { setTimeout(function(){ DJMask.msg(data.failDesc); },1500); DJMask.msg(data.failDesc); setTimeout(function(){ ajax1Dfd.resolve(); },3000); its_promise.done(function(){ getAllpage(); }); } } }); } /*==================================上傳圖片（日常檢驗記錄）主頁上傳圖片，更新資料庫=============================================================*/ function dailyinspectrecordurlUploadImage1(id, i) { var ajax1Dfd = $.Deferred(); var its_promise = $.when(ajax1Dfd); $("#gasCylinderCheckInfoId").val(id); var files = document.getElementById("dailyinspectrecordurlFile" + i + "").files; var f = document.getElementById("dailyinspectrecordurlFile" + i + "").value; if ((files.length-0) == 0) { DJMask.msg("請上傳圖片"); return false; }else if(5 < (files.length-0) ){ DJMask.msg("圖片不能超過5張！"); return false; } else { if (f != null && !/\.(|jpg|jpeg|png|JPG|PNG)$/.test(f)) { DJMask.msg("圖片型別必須是.jpeg,jpg,png中的一種"); return false; } } /* var id = $("#id").val();*/ DJMask.msg("請稍等正在處理！"); $.ajaxFileUpload({ url: "/config/add-GasCylinderCheckInfoDailyinspectrecordurlFileUpload1?gasCylinderCheckInfoId=" + id + "&ii=" + i, /*data: {'id': id},*/ fileElementId: 'dailyinspectrecordurlFile' + i, dataType: "json", success: function (data) { if (200 == data.resultCode) { setTimeout(function(){ DJMask.msg(data.failDesc); },1500); setTimeout(function(){ ajax1Dfd.resolve(); },3000); its_promise.done(function(){ getAllpage(); }); } else { DJMask.msg(data.failDesc); setTimeout(function(){ DJMask.msg(data.failDesc); },1500); setTimeout(function(){ ajax1Dfd.resolve(); },3000); its_promise.done(function(){ getAllpage(); }); } /* $("#certificateURL5").attr("src", data); $("#dailyinspectrecordurl").val(data);*/ /* var data2 = data.split("?");*/ /* $("#loading").toggle();*/ } }); }
直接把 formData 賦值個ajax的data，後臺後根據key 名接收；
後臺用 CommonsMultipartFile集合對應傳過來的名字來接收資料；
圖片增加刪除頁面與使用者互動 js 操作：
assets/js/gm/air_parameter_add.js
$(".c-nav .ed").find("li").eq(1).addClass("cur") $(".c-nav .ed").find("li").eq(1).find(".abx").eq(8).addClass("cur") /*=================日期=============================*/ //日期常規用法 laydate.render({ elem: '#testdate' }); /*=======================（一）======車牌查詢車輛和氣瓶資訊，去氣瓶的controller中查詢資料，必須是要配置好車輛的======================================*/ function SelectVehicleByCph() { $("#num").empty(); var cph = $("#cph").val(); $.ajax({ type: 'post', dataType: "json", /*contentType: "application/json; charset=utf-8",*/ /*GasCylindeController*/ url: "/config/showAdd-GasCylinderCheckInfo", data: {"cph": cph}, success: function (data) { if (data.resultCode == 200) { if (0 < data.list.length) { DJMask.msg(data.failDesc); /* for (var i = 0; i < data.list.length; i++) {*/ for (var j = 0; j < data.list[0].gasCylinders.length; j++) { $("#num").append(" <option value=" + data.list[0].gasCylinders[j].id + ">" + data.list[0].gasCylinders[j].num + "</option>"); } SelsceGasCylinderpositionnum(); } else { DJMask.msg(data.failDesc); } } if (data.resultCode == 505) { /* $("#num").remove("selector");*/ /* $("#num").remove("selector","option");*/ $("#num").empty(); $("#positionnum").val(""); DJMask.msg(data.failDesc); /* $("#messageValue").val(data.failDesc); $("#btn3").click();*/ } }, error: function () { DJMask.msg("獲取車牌異常！\n") } }); } /*=======================（二）======氣瓶id查詢，查詢氣瓶位置編號======================================*/ /*function SelsceGasCylinderpositionnum() { /!*下拉選擇氣瓶編號時，從value獲取氣瓶id*!/ var gasCylinderId = $("#num").val(); $.ajax({ type: 'post', dataType: "json", /!*contentType: "application/json; charset=utf-8",*!/ url: "/config/showAdd-GasCylinderCheckInfoTwo", data: {"gasCylinderId": gasCylinderId}, success: function (data) { if (data.resultCode == 200) { if (0 < data.list.length) { $("#positionnum").val(data.list[0].positionnum); $("#GasCylinderNum").val(data.list[0].num); } else { DJMask.msg("無氣瓶資料"); } } if (data.resultCode == 505) { $("#messageValue").val(data.failDesc); $("#btn3").click(); } }, error: function () { $("#messageValue").val("獲取車牌異常！"); $("#btn3").click(); } }); }*/ /*=============================氣瓶編號查詢氣瓶位置編號和車牌號======================================*/ $(function () { SelsceGasCylinderpositionnum1(); }); function SelsceGasCylinderpositionnum1() { //先清除所有 $("#cph").val(""); $("#positionnum").val(""); $("#num").val(""); $("#GasCylinderNum").val(""); /*（產品合格證）*/ $("#certificateURL1").attr("src", ""); $("#productqualifyurl").val(""); /*（質量說明書qualityspecifyurl）*/ $("#certificateURL").attr("src", ""); $("#manufacturingsupervisioninsurl").val(""); /*（質量證明書）*/ $("#certificateURL2").attr("src", ""); $("#qualitycertificateurl").val(""); /*（使用說明書）*/ $("#certificateURL6").attr("src", ""); $("#instructionmanualurl").val(""); /*（檢驗報告）*/ $("#certificateURL4").attr("src", ""); $("#inspectereporturl").val(""); /*（日常檢驗記錄）*/ $("#certificateURL5").attr("src", ""); $("#dailyinspectrecordurl").val(""); $("#gasCylinderCheckInfoId").val(""); /*（產品合格證）*/ $("#productqualifyurldurlHtml").html(""); /*（質量證書）*/ $("#qualitycertificateurlHtml").html(""); /*（質量說明書）*/ $("#manufacturingsupervisioninsurlHtml").html(""); /*（使用說明書）*/ $("#instructionmanualurlHtml").html(""); /*（檢驗報告）*/ $("#inspectereporturldurlHtml").html(""); /*（日常檢驗記錄）*/ $("#dailyinspectrecordurlHtml").html(""); var loadingX = $("#loadingX").val(); var num = $("#num1").val(); if (null == num || 0 == num.length) { DJMask.msg("請輸入氣瓶編號！"); return; } $.ajax({ type: 'post', dataType: "json", /*contentType: "application/json; charset=utf-8",*/ url: "/config/SelsceGasCylinderpositionnum1", data: {"num": num}, success: function (data) { if (data.resultCode == 200) { if (0 < data.list.length) { $("#cph").val(data.list[0].vehicle.cph); $("#positionnum").val(data.list[0].gasCylinder.positionnum); $("#num").val(data.list[0].gasCylinder.id); $("#GasCylinderNum").val(data.list[0].gasCylinder.num); if (null != data.list[0].gasCylinderCheckInfo) { /*原產品合格證*/ if (null != data.list[0].gasCylinderCheckInfo.productqualifyurl && 0 < data.list[0].gasCylinderCheckInfo.productqualifyurl.length) { $("#productqualifyurl").val(data.list[0].gasCylinderCheckInfo.productqualifyurl); } /*原質量證書*/ if (null != data.list[0].gasCylinderCheckInfo.qualitycertificateurl && 0 < data.list[0].gasCylinderCheckInfo.qualitycertificateurl.length) { $("#qualitycertificateurl").val(data.list[0].gasCylinderCheckInfo.qualitycertificateurl); } /*原質量說明書*/ /* if (null != data.list[0].gasCylinderCheckInfo.qualityspecifyurl && 0 < data.list[0].gasCylinderCheckInfo.qualityspecifyurl.length) { $("#manufacturingsupervisioninsurl").val(data.list[0].gasCylinderCheckInfo.qualityspecifyurl); }*/ /*原使用說明書*/ if (null != data.list[0].gasCylinderCheckInfo.instructionmanualurl && 0 < data.list[0].gasCylinderCheckInfo.instructionmanualurl.length) { $("#instructionmanualurl").val(data.list[0].gasCylinderCheckInfo.instructionmanualurl); } } /*產品合格證*/ td1 = "<div class=\"img-box full\">" + "<section class=\" img-section\">" + " <p class=\"up-p\">產品合格證：<span class=\"up-span\">最多可以上傳5張圖片</span></p>" + "<div class=\"z_photo upimg-div clear\" >" + "<section class=\"z_file fl\">" + "<img src=\"/assets/upjs/img/a11.png\" class=\"add-img\">" + "<input type=\"file\" name=\"file\" id=\"productqualifyurlFile1\" class=\"file\" value=\"\" accept=\"image/jpg,image/jpeg,image/png,image/bmp\" multiple />" + "</section>" + "</div>" + "</section>" + "</div>"; /*（質量證明書）*/ td2 = "<div class=\"img-box full\">" + "<section class=\" img-section\">" + "<p class=\"up-p\">質量證書：<span class=\"up-span\">最多可以上傳5張圖片</span></p>" + "<div class=\"z_photo upimg-div clear\" >" + "<section class=\"z_file fl\">" + "<img src=\"/assets/upjs/img/a11.png\" class=\"add-img\">" + "<input type=\"file\" name=\"file\" id=\"qualitycertificateurlFile2\" class=\"file\" value=\"\" accept=\"image/jpg,image/jpeg,image/png,image/bmp\" multiple />" + "</section>" + "</div>" + "</section>" + "</div>"; /*（質量說明書）*/ /* td3 = "<div class=\"img-box full\">" + "<section class=\" img-section\">" + "<p class=\"up-p\">質量說明書：<span class=\"up-span\">最多可以上傳5張圖片</span></p>" + "<div class=\"z_photo upimg-div clear\" >" + "<section class=\"z_file fl\">" + "<img src=\"/assets/upjs/img/a11.png\" class=\"add-img\">" + "<input type=\"file\" name=\"file\" id=\"manufacturingSupervisIoninsurFile2\" class=\"file\" value=\"\" accept=\"image/jpg,image/jpeg,image/png,image/bmp\" multiple />" + "</section>" + "</div>" + "</section>" + "</div>";*/ /*（使用說明書）*/ td4 = "<div class=\"img-box full\">" + "<section class=\" img-section\">" + " <p class=\"up-p\">使用說明書：<span class=\"up-span\">最多可以上傳5張圖片</span></p>" + "<div class=\"z_photo upimg-div clear\" >" + "<section class=\"z_file fl\">" + "<img src=\"/assets/upjs/img/a11.png\" class=\"add-img\">" + "<input type=\"file\" name=\"file\" id=\"instructionmanualurlFile2\" class=\"file\" value=\"\" accept=\"image/jpg,image/jpeg,image/png,image/bmp\" multiple />" + "</section>" + "</div>" + "</section>" + "</div>"; /*（檢驗報告）*/ td5 = "<div class=\"img-box full\">" + "<section class=\" img-section\">" + "<p class=\"up-p\">檢驗報告：<span class=\"up-span\">最多可以上傳5張圖片</span></p>" + "<div class=\"z_photo upimg-div clear\" >" + "<section class=\"z_file fl\">" + "<img src=\"/assets/upjs/img/a11.png\" class=\"add-img\">" + "<input type=\"file\" name=\"file\" id=\"inspectereporturlFile2\" class=\"file\" value=\"\" accept=\"image/jpg,image/jpeg,image/png,image/bmp\" multiple />" + "</section>" + "</div>" + "</section>" + "</div>"; /*（日常檢驗記錄）*/ td6 = "<div class=\"img-box full\">" + "<section class=\" img-section\">" + "<p class=\"up-p\">日常檢驗記錄：<span class=\"up-span\">最多可以上傳5張圖片</span></p>" + "<div class=\"z_photo upimg-div clear\" >" + "<section class=\"z_file fl\">" + "<img src=\"/assets/upjs/img/a11.png\" class=\"add-img\">" + "<input type=\"file\" name=\"file\" id=\"dailyinspectrecordurlFile2\" class=\"file\" value=\"\" accept=\"image/jpg,image/jpeg,image/png,image/bmp\" multiple />" + "</section>" + "</div>" + "</section>" + "</div>"; /*新增必須isfirsttest 寫1*/ $("#isfirsttest").val(1); /*產品合格證*/ $("#productqualifyurldurlHtml").html(td1); /*質量證書*/ $("#qualitycertificateurlHtml").html(td2); /*/!*質量說明書*!/ $("#manufacturingsupervisioninsurlHtml").html(td3);*/ /*使用說明書*/ $("#instructionmanualurlHtml").html(td4); /*檢驗報告*/ $("#inspectereporturldurlHtml").html(td5); /*日常檢驗記錄*/ $("#dailyinspectrecordurlHtml").html(td6); /* } */ } else { DJMask.msg(data.failDesc); } } if (data.resultCode == 505) { DJMask.msg(data.failDesc); } }, error: function () { DJMask.msg(data.failDesc); } }); } /*=============================新增======================================*/ function go() { $("#btn1").click(); } /*================================================彈出框 =========================================================*/ $(function () { /* 新增提示框和js邏輯!*/ $("#btn1").click(function () { var cph = $("#cph").val(); /*這個num，是氣瓶id*/ var num = $("#num").val(); /*檢驗日期*/ var firsttestdate = $("#testdate").val(); /*檢驗單位*/ var firsttestunit = $("#testunit").val(); /*檢驗結果*/ var firsttestresult = $("#testresult").val(); if ( 0 == firsttestdate.length ) { DJMask.msg("請輸入檢驗日期！"); return; } if (0 == firsttestunit.length ) { DJMask.msg("請輸入檢驗單位！"); return; } if ( 0 == firsttestresult.length) { DJMask.msg("請輸入檢驗結果！"); return; } /*================圖片上傳獲得圖片id=================*/ /*===============先上傳圖片=========================*/ var f1 = document.getElementById("productqualifyurlFile1").value; var f2 = document.getElementById("qualitycertificateurlFile2").value; /* var f3 = document.getElementById("manufacturingSupervisIoninsurFile2").value;*/ var f4 = document.getElementById("instructionmanualurlFile2").value; var f5 = document.getElementById("inspectereporturlFile2").value; var f6 = document.getElementById("dailyinspectrecordurlFile2").value; //判斷圖片是否已經上傳 /*=============ajax圖片上傳===========================*/ var txt = "確定為車牌號: " + cph + " 新增定檢資訊?"; var option = { title: "新增定檢資訊", btn: parseInt("0011", 2), onOk: function () { console.log("確認啦"); DJMask.msg("正在處理請稍等！"); /*======================新方法=================================*/ /*產品合格證*/ if (null != f1 && f1 != ""){ if ((!/\.(|jpg|jpeg|png|JPG|PNG)$/.test(f1)) ) { DJMask.msg("圖片型別必須是.jpeg,jpg,png中的一種"); return false; } /*產品合格證*/ ProductqualifyurlFileUpload(someAjaxDfd); } /*質量證書*/ if (null != f2 && f2 != ""){ if ((!/\.(|jpg|jpeg|png|JPG|PNG)$/.test(f2)) ) { DJMask.msg("圖片型別必須是.jpeg,jpg,png中的一種"); return false; } /*質量證書*/ qualitycertificateurlFileUpload(ajax1Dfd); } /* 質量說明書*/ /*if (null != f3 && f3 != ""){ if ((!/\.(|jpg|jpeg|png|JPG|PNG)$/.test(f3)) ) { DJMask.msg("圖片型別必須是.jpeg,jpg,png中的一種"); return false; } FF++; /!* 質量說明書*!/ ManufacturingSupervisionInsurFileUpload(ajax2Dfd); its_promise2.done(function () { x++; }); }*/ /* 使用說明書*/ if (null != f4 && f4 != ""){ if ((!/\.(|jpg|jpeg|png|JPG|PNG)$/.test(f4)) ) { DJMask.msg("圖片型別必須是.jpeg,jpg,png中的一種"); return false; } /* 使用說明書*/ instructionmanualurlFileUpload(ajax3Dfd); } if (null != f5 && f5 != ""){ if ((!/\.(|jpg|jpeg|png|JPG|PNG)$/.test(f5)) ) { DJMask.msg("圖片型別必須是.jpeg,jpg,png中的一種"); return false; } /* 檢驗報告*/ InspectereporturlUpload(ajax4Dfd); } /* 日常檢驗記錄*/ if (null != f6 && f6 != ""){ if ((!/\.(|jpg|jpeg|png|JPG|PNG)$/.test(f6)) ) { DJMask.msg("圖片型別必須是.jpeg,jpg,png中的一種"); return false; } /* 日常檢驗記錄*/ DailyinspectrecordurlUpload(); } /*定檢資訊資料寫入*/ createGasCylinderchkInfo(cph); } } window.wxc.xcConfirm(txt, "custom", option); }); /* 新增氣瓶定檢資訊*/ function createGasCylinderchkInfo(cph) { var productqualifyurl = $("#productqualifyurl").val(); var qualitycertificateurl = $("#qualitycertificateurl").val(); var manufacturingsupervisioninsurl = $("#manufacturingsupervisioninsurl").val(); var instructionmanualurl = $("#instructionmanualurl").val(); var inspectereporturl = $("#inspectereporturl").val(); var dailyinspectrecordurl = $("#dailyinspectrecordurl").val(); var num = $("#num").val(); var GasCylinderNum = $("#GasCylinderNum").val(); var positionnum = $("#positionnum").val(); var orderByClause = $("#orderByClause").val(); var isfirsttest = $("#isfirsttest").val(); var testdate = $("#testdate").val(); var testunit = $("#testunit").val(); var testresult = $("#testresult").val(); console.log("確認啦"); $.ajax({ type: "POST", dataType: "json", async:false, url: "/config/add-GasCylinderCheckInfo",//url data: { "productqualifyurl": productqualifyurl, "qualitycertificateurl": qualitycertificateurl, "manufacturingsupervisioninsurl": manufacturingsupervisioninsurl, "instructionmanualurl": instructionmanualurl, "inspectereporturl": inspectereporturl, "dailyinspectrecordurl": dailyinspectrecordurl, "num": num, "cph": cph, "GasCylinderNum": GasCylinderNum, "positionnum": positionnum, "orderByClause": orderByClause, "isfirsttest": isfirsttest, "testdate": testdate, "testunit": testunit, "testresult": testresult }, success: function (data) { console.log("ajax:" + data); if (data.resultCode == 200) { $("#messageValue").val(data.failDesc); $("#btn2").click(); } if (data.resultCode == 505) { $("#messageValue").val(data.failDesc); $("#btn3").click(); } ; }, error: function () { $("#messageValue").val("系統異常操作不成功！\n"); $("#btn3").click(); } }); } /* 成功提示*/ $("#btn2").click(function () { var txt = $("#messageValue").val(); var option = { title: "新增定檢資訊", btn: parseInt("0012", 2), onOk: function () { window.history.go(-1); } } window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.success, option); }); /* 錯誤提示!*/ $("#btn3").click(function () { var txt = $("#messageValue").val(); var option = { title: "新增定檢資訊", btn: parseInt("0012", 2), onOk: function () { } } window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.error, option); }); }); /*=================================================彈出頁面js===============================================================*/
頁面：
<%@ page language="java" pageEncoding="UTF-8"
contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta name="author" content=""/>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="icon" type="image/x-icon" href="/assets/i/favicon.ico"/>
<link rel="stylesheet" href="/assets/newPageJs/css/reset.css">
<link rel="stylesheet" href="/assets/newPageJs/css/style.css">
<script src="/assets/newPageJs/js/jQuery.js"></script>
<script type="text/javascript" src="/assets/showImg/js/popwin.js"></script>
</head>
<body>
<!--nave-->
<jsp:include page="../common/newMenu.jsp"></jsp:include>
<!--header-->
<jsp:include page="../common/newTop.jsp"></jsp:include>
<!--main-->
<div class="over-auto">
<form class="am-form am-form-horizontal" action="##" method="post"
id="stuForm">
<input id="gasCylinderCheckInfoId" name="gasCylinderCheckInfoId"
type="hidden" value="">
<%--第一次新增為1，第二次新增為0--%>
<input id="isfirsttest" name="isfirsttest" type="hidden" value="">
<%--產品合格證--%>
<input type="hidden" id="productqualifyurl" name="productqualifyurl"
value="">
<%--質量證書--%>
<input type="hidden" id="qualitycertificateurl" name="productqualifyurl"
value="">
<%--質量說明書--%>
<input type="hidden" id="manufacturingsupervisioninsurl"
name="productqualifyurl" value="">
<%--使用說明書--%>
<input type="hidden" id="instructionmanualurl" name="productqualifyurl"
value="">
<%--檢驗報告--%>
<input type="hidden" id="inspectereporturl" name="productqualifyurl"
value="">
<%--日常檢驗記錄--%>
<input type="hidden" id="dailyinspectrecordurl" name="productqualifyurl"
value="">
<input id="loadingX" name="loadingX" type="hidden"
value="${pageContext.request.contextPath}/assets/img/loading.gif">
<div class="m-main">
<div class="f-cb">
<div class="m-title">新增定檢資訊</div>
<a href="javascript:history.go(-1);" class="return fr">返回</a>
<a href="javascript:go()" type="button" class="modify fr"><img
src="/assets/newPageJs/img/a8.svg"
alt=""/>提交</a>
</div>
<div class="kk-box">
<div class="box-one">
<div class="s-title">基礎資訊</div>
<table id="tabe">
<%-- ======--%>
<tr>
<td class="w320">
<div class="same-bx mar-fr">
<%--獲取的氣瓶編號--%>
<input name="GasCylinderNum"
id="GasCylinderNum" type="hidden">
<%--這裡了的num存放氣瓶id--%>
<input name="num" id="num" type="hidden">
<div class="te">氣瓶編號</div>
<input class="pt hover" name="num1"
id="num1" value=""
onblur="SelsceGasCylinderpositionnum1()"
type="text"><span style="color:red;margin-left: 2px">*</span>
<%--<select class="select hover" id="num" name="num"
onchange="SelsceGasCylinderpositionnum();">
</select> 按車牌號查詢氣瓶資訊 --%>
</div>
</td>
<td>
<div class="same-bx mar-fr">
<div class="te">氣瓶位置編號</div>
<input class="pt hover" name="positionnum"
id="positionnum" value=""
readonly="readonly" type="text">
</div>
</td>
</tr>
<tr>
<td>
<div class="same-bx mar-fr">
<div class="te">車牌號</div>
<%--<input class="pt hover" name="cph" id="cph" value="" onblur="SelectVehicleByCph()"
type="text"> 按車牌號查詢氣瓶資訊 --%>
<input class="pt hover" name="cph" id="cph"
value=""
readonly="readonly" type="text">
</div>
</td>
<td>
</td>
</tr>
<%--================--%>
</table>
</div>
<div class="box-one">
<div class="s-title">檢驗資訊</div>
<table>
<tr>
<td class="w320">
<div class="same-bx mar-fr">
<div class="te">檢驗日期</div>
<input type="text"
class="layui-input pt hover day"
name="testdate"
id="testdate" value="" lay-key="1">
<span style="color:red;margin-left: 2px">*</span>
</div>
</td>
<td>
<div class="same-bx mar-fr">
<div class="te">檢驗單位</div>
<input class="pt hover" name="testunit"
id="testunit" type="text">
<span style="color:red;margin-left: 2px">*</span>