基於BootStrap專案需求一款多檔案上傳控制元件,通過篩選分析發現了BootStrap-FileInput這款控制元件(開源),能滿足

大多數檔案上傳需求,簡單寫一下使用方法和遇到的坑！！

專案的前後臺基本上就是使用很典型的元件 BootStrap + SpringMVC

       專案下載下來是個*.tar或者*.zip，解壓下來，將解壓後的js和css目錄放到專案的合適位置就好了，而且

直接引用就OK了!!

       FileInput典型的應用就是作為獨立的上傳控制元件直接和後臺進行互動,這個網上與很多案例，可以直接參考

我使用的場景是嵌入到一個Form中,只是將FileInput作為一個前端檔案新增控制元件,Form提交時,新增的檔案作為

Form中一項和Form一起提交,如圖：

效果就是這樣的，當然尺寸和控制元件功能按鈕都是程式設計可配置的,js程式碼的初始化片段如下：

$("#simple").fileinput({
		    theme: "explorer",     //這個是選項需要引入一個增強控制元件 Krajee Explorer Theme
		    uploadUrl: "/simple",  // 如果是作為Form提交的一部分，這裡的地址偽造一個假的,但必須要寫，否則元件的部分功能按鈕不會正常顯示
		    allowedFileExtensions: ["jpg", "jpeg", "gif", "png","bmp","pdf"], //支援的檔案型別
		    overwriteInitial: false,
		    initialPreviewAsData: true,
		    showUpload: false,  //不展示上傳功能按鈕
		    showCancel:false,   
		    maxFileCount: 6,    //最大上傳6張
		    minFileCount: 1,    //最小上傳一張
		    maxFileSize: 1024*10,     //單位為kb，如果為0表示不限制檔案大小
                    fileActionSettings:{showUpload:false}, //控制Actions按鈕展示
		});
 

提交form前需要手動程式設計將控制元件新增的File物件取出,然後放在FormData物件中上傳後臺,程式碼片段如下:

        	var certFiles = $('#simple').fileinput('getFileStack');  //這個是元件方法getFileStack,返回已選擇的File物件陣列
        	if (certFiles.length == 0){
        		new PNotify({
        			title : '後臺入金',
        			text : '請至少上傳1個憑證檔案',
        			type : 'error'
        		});
                	return ;
        	}
        	if (certFiles.length > 6){
        		new PNotify({
        			title : '後臺入金',
        			text : '最多允許上傳6個憑證檔案',
        			type : 'error'
        		});
                	return ;
        	}
        	for (var i=0;i<certFiles.length;i++){
        		formData.append("simpleFiles", certFiles[i]); }
 

@RequestParam(required = false, name="simpleFiles") MultipartFile[] simpleFiles