bootstrap inputfile 使用-上傳，回顯
阿新 • • 發佈：2020-09-03
近期用bootstrap 做前端的上傳，功能涉及到上傳時就是召網上的教程隨便弄一搜一大把，但是做到修改頁面時候不知道頁面該如何回顯，折騰了一陣子才完成遂記錄下來希望能給看到的小夥伴有點啟發吧。
首先是上傳的功能
上傳要求支援圖片和各種其他種類的檔案，效果基本 如下了，點選上傳，依次就是調後臺介面把檔案送上，返回一個檔案的路徑，可以直接請求的伺服器地址。
html程式碼如下：基本的框子吧。
<div class="file-loading"> <input id="fileinput-demo-0" name="file" type="file" multiple> </div>
配套的js:
var taskFiles=[]; $(document).ready(function () { //上傳檔案 $("#fileinput-demo-1").fileinput({ language: 'zh', //設定語言 uploadUrl:ctx + "api/common/upload", //上傳的地址 // allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的檔案字尾 //uploadExtraData:{"id": 1, "fileName":'123.mp3'}, uploadAsync: true, //預設非同步上傳 showUpload:true, //是否顯示上傳按鈕 showRemove :false, //顯示移除按鈕 showPreview :true, //是否顯示預覽 showCaption:false,//是否顯示標題 browseClass:"btn btn-primary", //按鈕樣式 dropZoneEnabled: false,//是否顯示拖拽區域 // minImageWidth: 50, //圖片的最小寬度 // minImageHeight: 50,//圖片的最小高度 // maxImageWidth: 1000,//圖片的最大寬度 // maxImageHeight: 1000,//圖片的最大高度 //maxFileSize:0,//單位為kb，如果為0表示不限制檔案大小 //minFileCount: 0, maxFileCount:10, //表示允許同時上傳的最大檔案個數 enctype:'multipart/form-data', validateInitialCount:true // previewSettings: {//圖片顯示 // image: {width: "80px", height: "60px"}, // } // previewFileIcon: "<iclass='glyphicon glyphicon-king'></i>", // msgFilesTooMany: "選擇上傳的檔案數量({n}) 超過允許的最大數值{m}！", }).on("fileuploaded", function (event, data, previewId, index){
// 這裡上傳會自動呼叫上面配置的上傳地址，聲場的previewId就是圖片的元素id, // $('#' + previewId).attr('fileid', data.response.fileName); var file={ previewId:previewId, fileName:data.response.fileName }; taskFiles.push(file);//將每一個上傳成功的檔案放到初始的一個數組裡， console.log(taskFiles); }).on('filesuccessremove', function (event, previewId, extra) { //在移除事件裡取出所需資料，並執行相應的刪除指令，從陣列內刪除，可以調伺服器介面做服務端刪除。 console.log(previewId) for(var i=0;i<taskFiles.length;i++){ if(taskFiles[i].previewId==previewId){ taskFiles.splice(i,1); } } console.log(taskFiles); });
我們上傳三個檔案，對用控制檯打印出三個檔案資訊，
下面看一下修改頁面的回顯操作，html 增加了一個 隱藏的元素可以不考慮我的程式碼裡有這裡不是必須的。
<div class="form-group"> <label class="col-sm-3 control-label">任務檔案：</label> <div class="col-sm-8"> <div class="file-loading"> <input id="fileinput-demo-1" name="file" type="file" multiple> </div> </div> </div> <input type="hidden" name="filePaths" id="carousel_imgs_hidden"/>
js如下
var carouselImgs = [] ; var fileNames="xxx.jpg,xxx.mp4"; // 獲取協會圖片介紹getInitFiles(taskInfo.taskFiles) var initialPreviews = (fileNames ? fileNames.split(","):[] ); var initialPreview = [] ; var initialPreviewConfig = [] ; for (var i = 0; i < initialPreviews.length; i++) { var fileName = initialPreviews[i] ; if (fileName != null && fileName !=''){ var delImg = new Object() ; delImg = generFilDel(fileName); initialPreview.push(fileName) ; initialPreviewConfig.push(delImg) ; console.log(initialPreviewConfig); carouselImgs.push(fileName) ; } } $("#carousel_imgs_hidden").val(carouselImgs) ; // 協會圖片介紹 $("#fileinput-demo-1").fileinput({ uploadUrl: "/api/common/upload", language: 'zh', // allowedFileExtensions: ['image', 'html', 'text', 'video', 'audio', 'flash', 'object','other'], //dropZoneEnabled:false, showClose:false, showCaption: false, maxFileCount:10, showRemove:false, uploadAsync: true, enctype: 'multipart/form-data', validateInitialCount:true, msgFilesTooMany: "選擇上傳的檔案數量({n}) 超過允許的最大數值{m}！", fileActionSettings:{ showRemove: true, showUpload: false, showDownload: true, }, // previewSettings: { // image: {width: "200px", height: "160px"}, // }, // allowedPreviewTypes: []; previewFileType: ['image', 'html', 'text', 'video', 'audio', 'flash'], allowedPreviewTypes: ['image','video', 'audio'], overwriteInitial: false, initialPreviewAsData: true, initialPreviewFileType: 'image', //'html', 'text', 'video', 'audio', 'flash', 'object'], initialPreviewShowDelete:true, initialPreview:initialPreview, initialPreviewConfig:initialPreviewConfig // }).on('filepredelete', function(event, key) { // console.log('Key = ' + key); }).on("fileuploaded", function(event, data, previewId, index) { var fileName = data.response.fileName; $("#"+previewId).attr("fileName", fileName) ; var carouselImgs=$("#carousel_imgs_hidden").val().split(","); // var hiddenFilePaths=$("#carousel_imgs_hidden").val(); // carouselImgs =hiddenFilePaths?[]:hiddenFilePaths.split(","); carouselImgs.push(fileName) ; $("#carousel_imgs_hidden").val(carouselImgs) ; }).on("filesuccessremove", function(event, previewId, extra) { console.log("刪除檔案"); var fileName = $("#"+previewId).attr("fileName"); var carouselImgs=$("#carousel_imgs_hidden").val().split(","); // carouselImgs =hiddenFilePaths?[]:hiddenFilePaths.split(","); var newCarouselImgs = [] ; for (var i = 0; i < carouselImgs.length; i++) { if (carouselImgs[i] != fileName) newCarouselImgs.push(carouselImgs[i]); } carouselImgs = newCarouselImgs ; $("#carousel_imgs_hidden").val(carouselImgs) ; }).on('filepredelete', function(event, key, jqXHR, data) { console.log('Key = ' + key); removeHidden(key); }); //$("#fileinput-demo-1").fileinput('_initFileActions');//這行程式碼就是呼叫繫結刪除事件的 function removeHidden(fileName){ var hiddenFilePaths=$("#carousel_imgs_hidden").val().split(","); for (var i = 0; i < hiddenFilePaths.length; i++) { if (hiddenFilePaths[i] == fileName){ hiddenFilePaths.splice(i,1); break; } } console.log(hiddenFilePaths); $("#carousel_imgs_hidden").val(hiddenFilePaths); }
function generFilDel(fileName){
var o=new Object();
o.caption = fileName ;
o.url = "/api/common/del";
o.key = fileName;
if(fileName==null||fileName.indexOf(".")==-1){
//return {"type":null,"fileType":null};
o.type="image";
o.filetype="image/"+fileTyp;
return o;
}
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(["swf", "flv" , "mp4","wav", "wma", "wmv", "mid", "avi", "mpg",
"rm", "rmvb"].join(",").indexOf(fileTyp) !=-1 ){
o.type="video";
o.filetype="video/"+fileTyp;
return o;
}
return o;
}
var initialPreview = [] ; var initialPreviewConfig = [] ; 這兩個屬性才是顯示的東西，
generFilDel 這個方法就是弄一下檔案的型別否則渲染出來的格式是這樣的
分好型別後可以優雅的展示上傳過的檔案多媒體檔案可以和諧的預覽