[b]請好心人幫我看一下代碼
下面這段代碼別的什么都正常，批量上傳，回顯，洗掉，回顯再批量上傳，都正常，但是有一個bug。
操作步驟：先選擇圖片，點擊上傳，再選一張圖片；此時id是用的和上一個預覽圖一樣的id，導致我的邏輯沒辦法進行下去。
bootstrap-fileinput檔案也看的一知半解，嘗試了各種監聽事件，還不會操作原型，已經五天了；我快被困死了，求解求解。
[/b]
<div class="col-sm-12">
<div class="form-group">
<label class="col-sm-2 control-label">展陳圖片：</label>
<div class="col-sm-10">
<input id="goodsSide" name="goodsSide" class="form-control m-b" type="text">
<div class="file-loading">
<input id="fileinput-goodsSide" name="uploadImgFile" type="file" value="https://bbs.csdn.net/topics/上傳" multiple/>
</div>
</div>
</div>
</div>
//圖片---------------------------------
var carouselImgs = [];
var fileNames = null;
var initialPreviewsPic = (fileNames ? fileNames.split(",") : []);
var initialPreviewPic = [];
var initialPreviewConfigPic = [];
for (var i = 0; i < initialPreviewsPic.length; i++) {
var fileName = initialPreviewsPic[i];
if (fileName != null && fileName != '') {
var delImg = new Object();
delImg = generFilDel(fileName);
initialPreviewPic.push(fileName);
initialPreviewConfigPic.push(delImg);
carouselImgs.push(fileName);
}
}
$("#goodsSide").val(carouselImgs);
$("#fileinput-goodsSide").fileinput({
uploadUrl: prefix + "/up",
enctype: 'multipart/form-data',
validateInitialCount: true,
fileActionSettings: {
showRemove: true,
showUpload: true,
showDownload: true,
},
// allowedPreviewTypes: [];
previewFileType: ['image'],
allowedPreviewTypes: ['image'],
initialPreviewFileType: 'image', //'html', 'text', 'video', 'audio', 'flash', 'object'],
initialPreviewShowDelete: true,
initialPreview: initialPreviewPic,
initialPreviewConfig: initialPreviewConfigPic,//用于設定每個項的重要屬性的配置（作為 的一部分進行設定）
theme: 'explorer-fas',
overwriteInitial: false,//是否要覆寫初始預覽內容和字幕設定。
initialPreviewAsData: true,//是否將初始預覽內容集決議為資料而不是原始標記
language: "zh",//配置語言
showUpload: true, //顯示整體上傳的按鈕
showRemove: false,//顯示整體洗掉的按鈕
showClose: false,//是否顯示關閉按鈕
uploadAsync: true,//異步上傳
uploadLabel: "上傳",//設定整體上傳按鈕的漢字
// removeLabel: "移除",//設定整體洗掉按鈕的漢字
uploadClass: "btn btn-warning",//設定上傳按鈕樣式
showCaption: false,//是否顯示標題
dropZoneEnabled: false,//是否顯示拖拽區域
maxFileSize: 0,//檔案大小，
maxFileCount: 100,//允許最大上傳數，可以多個，
allowedFileExtensions: ["bmp", "gif", "jpg", "jpeg", "png"],//,"jpg", "png","gif","docx","zip","xlsx","txt"
msgFilesTooMany: "選擇上傳的檔案數量({n}) 超過允許的最大數值{m}！",
showBrowse: true,
browseOnZoneClick: false,
previewSettings: {
image: {width: "250px !important", height: "160px !important"}
},
layoutTemplates: {
//actionUpload: ''//洗掉小預覽窗上傳按鈕
},
})
.on("fileuploaded", function (event, data, previewId, index) {
console.log("上傳完成觸發監聽事件")
console.log(previewId)
var fileName = data.response.data;
$("#" + previewId).attr("fileName", fileName);
var carouselImgs = $("#goodsSide").val() != "" ? $("#goodsSide").val().split(",") : [];
carouselImgs.push(fileName);
$("#goodsSide").val(carouselImgs);
})
.on("filesuccessremove", function (event, previewId, extra) {
var fileName = $("#" + previewId).attr("fileName");
var carouselImgs = $("#goodsSide").val() != "" ? $("#goodsSide").val().split(",") : [];
var newCarouselImgs = [];
for (var i = 0; i < carouselImgs.length; i++) {
if (carouselImgs[i] != fileName)
newCarouselImgs.push(carouselImgs[i]);
}
carouselImgs = newCarouselImgs;
$("#goodsSide").val(carouselImgs);
}).on('filepredelete', function (event, key, jqXHR, data) {
removeHidden(key, "#goodsSide");
});
//修改初始時加載的檔案的型別
function generFilDel(fileName) {
var o = new Object();
o.caption = fileName;
o.url = prefix + "/del";
o.key = fileName;
if (fileName == null || fileName.indexOf(".") == -1) {
return {"type": null, "fileType": null};
}
var fileTyp = fileName.split(".")[1];
if (["bmp", "gif", "jpg", "jpeg", "png"].join(",").indexOf(fileTyp) != -1) {
o.type = "image";
o.filetype = "image/" + fileTyp;
return o;
}
if (["mp3"].join(",").indexOf(fileTyp) != -1) {
o.type = "audio";
o.filetype = "audio/" + fileTyp;
return o;
}
if (["mp4"].join(",").indexOf(fileTyp) != -1) {
o.type = "video";
o.filetype = "video/" + fileTyp;
return o;
}
if (["pdf"].join(",").indexOf(fileTyp) != -1) {
o.type = "pdf";
o.filetype = "pdf/" + fileTyp;
return o;
}
return o;
}
//洗掉路徑
function removeHidden(fileName, idName) {
var hiddenFilePaths = $(idName).val().split(",");
for (var i = 0; i < hiddenFilePaths.length; i++) {
if (hiddenFilePaths[i] == fileName) {
hiddenFilePaths.splice(i, 1);
break;
}
}
$(idName).val(hiddenFilePaths);
}
uj5u.com熱心網友回復：
有沒有大佬知道這么怎么操作的啊轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/253247.html
標籤：Web 開發
上一篇：Java 獲取資料庫的資料匯入到excel模板中，模板有多個表頭，表頭的位置不固定是動態的，同時一個excel有多個sheet