一、前言
最近一個項目中需要實現多文件上傳與管理，而項目是基於bootstrap開發的，所以查了一些bootstrap文件上傳插件，最后發現還是bootstrap-fileinput最美觀，該插件可以實現多文件的上傳與管理（插件官方地址：http://plugins.krajee.com/file-input），具體的效果如下：
（bootstrap-fileinput不局限於圖片上傳，也可以實現文件上傳，但圖片的縮略圖容易辨識，這里就以圖片上傳為例）
該插件基本的操作可以參考：http://www.jq22.com/jquery-info5231，本文主要針對多文件管理
在講該插件如何使用前，先跟大家講一下項目中關於圖片管理的需求：
1、 可以上傳多個圖片
2、 只有當點擊保存按鈕時，圖片信息才保存至數據庫
3、 可以加載已經保存到數據庫的圖片信息，並提供刪除功能
因此，我們可以規定幾個文件狀態：
已選擇：已經放入到插件中，但還沒有上傳到服務器。如上圖中第3個圖片，該圖片下方有上傳按鈕。
已上傳：已經上傳到服務器，但圖片信息沒有保存到數據庫。如上圖中第2個圖片，該圖片下方有100%的進度條。
已保存：圖片信息已經保存至數據庫的圖片，如上圖中第1張圖，這些圖片下方有刪除按鈕，點擊刪除時會將圖片信息從數據庫中刪除。
二、引入必要文件
<link href="<%=path%>/static/css/bootstrap-3.3.5/bootstrap.min.css" rel="stylesheet"> <link href="<%=path%>/static/css/bootstrap-3.3.5/fileinput.css" rel="stylesheet"> <script src="<%=path%>/static/js/jquery-1.11.3.js"></script> <script src="<%=path%>/static/js/angularjs-1.3.9/angular.min.js"></script> <script src="<%=path%>/static/js/bootstrap-3.3.5/bootstrap.min.js"></script> <script src="<%=path%>/static/js/bootstrap-3.3.5/fileinput.js"></script> <script src="<%=path%>/static/js/bootstrap-3.3.5/fileinput_locale_zh.js"></script>
其中fileinput.js和fileinput_locale_zh.js都在插件待官方包中，angular.min.js和bootstrap.min.js就不多介紹了
三、多文件上傳
首先在頁面中定義file控件：
<input id="input-images" type="file" multiple class="file-loading" accept="image/*">
然后對該控件進行初始化，就可以實現該組件的多文件上傳了：
$("#input-images").fileinput({
uploadUrl: "<%=path%>" + "/album/pictureFileUpload",
allowedFileExtensions: ["jpg", "png", "gif"],
resizePreference: 'height',
maxFileCount: 10,
language: 'zh',
overwriteInitial: false,
resizeImage: true,
});
當然，初始化時的屬性有很多，這里不一一介紹了，后台代碼（使用JFinal）如下：
public void pictureFileUpload() {
UploadFile uploadFile = getFile();
renderJson("{\"link\":" + "\"/fileinput/upload/" + uploadFile.getFileName()
+ "\"" + ",\"fileName\":\"" + uploadFile.getOriginalFileName()
+ "\"}");
}
注意最后一定要返回Json，哪怕返回一個空json串（“{}”），返回的值保存在前台的data.response中。
四、已有文件的加載與刪除
已有文件的加載是指將服務器上已經存在的文件展示在該控件中，以實現文件管理，提供刪除功能，這主要依賴於initialPreview實現的。
將服務器上的文件名稱和文件地址獲取之后，使用initialPreview和initialPreviewConfig完成加載和定義刪除操作：
var initPreview = new Array();//展示元素
var initPreviewConfig = new Array();//展示設置
$.post(
"<%=path%>" + "/album/getPicsByAlbum",
{albumId : albumId},
function(result) {
for(var i=0;i<result.length;i++){
var pictureFile = result[i];
//用於展示已經上傳的圖片
initPreview.push("<img src='" + pictureFile.PICADDRESS
+ "' class='file-preview-image' alt='"+pictureFile.PICNAME+"' title='"+pictureFile.PICNAME+"'>");
var config = new Object();
config.caption = pictureFile.PICNAME;
config.url="<%=path%>" + "/album/deletePicById";
config.key=pictureFile.ID;
initPreviewConfig.push(config);
}
initFileInput($scope);
$("#input-images").fileinput('refresh', {
initialPreview: initPreview,
initialPreviewConfig: initPreviewConfig
});
}
);
點擊刪除圖標，會默認把config中待key值傳至后台，后台中定義deletePicById方法即可：
public void deletePicById() {
String picId = getPara("key");
service.deletePicById(Integer.valueOf(picId));
renderJson("{}");
}
五、幾點疑問的解答
1、為什么model里沒有屬性，卻可以在前端展示相關屬性？
2、（參考代碼）中初始化FileInput為什么要執行clear，destory操作？
3、保存時怎么知道那些圖片需要存數據庫，這是基於什么實現的？
var idx = $("#"+previewId).attr("data-fileindex");
六、代碼參考
文章寫得不好，太粗略了，我給大家整理了下源碼，單獨打個包，直接用eclipse導入即可實現，數據庫腳本為files.sql（MySQL），大家多看看代碼吧。
最后本人才學AngularJS，代碼寫的不夠純熟，如有不妥之處，歡迎大家留言。
參考代碼下載地址：http://files.cnblogs.com/files/kevin19900306/fileinput.zip