通過(guò)本文，你可以學(xué)習(xí)到如何封裝或者開發(fā)一個(gè)前端組件，同時(shí)學(xué)習(xí)Bootstrap-fileinput組件的使用，封裝后使用更加簡(jiǎn)單方便。
BaseFile是AdminEAP框架中基于Bootstrap-fileinput的附件上傳組件，它支持 支持多文件、在線預(yù)覽、拖拽上傳等功能，封裝后BaseFile主要包括以下功能：
彈出窗口的附件上傳
當(dāng)前界面的附件上傳
顯示附件明細(xì)
可編輯的附件明細(xì)(刪除、預(yù)覽、不可新增)
關(guān)于Bootstrap-fileinput的API文檔可參考
本文源碼已在AdminEAP框架(一個(gè)基于AdminLTE的Java開發(fā)平臺(tái))中開源，可在Github下載相關(guān)代碼：
Github：https://github.com/bill1012/AdminEAP
AdminEAP官網(wǎng)：
使用說(shuō)明
1、初始化
如果需要在當(dāng)前界面使用附件上傳功能(非彈窗方式)則需要在頭部引入相關(guān)的css和js文件
css文件
js文件
form表單上還需要配置enctype="multipart/form-data"屬性
2、彈窗方式調(diào)用
BaseFile支持彈窗方式打開一個(gè)附件上傳窗口，點(diǎn)擊附件上傳后，彈出窗口，上傳附件關(guān)閉窗口后，上傳的附件在type=file的控件回填。
在表單中點(diǎn)擊彈窗上傳附件：
上傳完畢，關(guān)閉窗口，附件回填
再次打開上傳附件上傳窗口時(shí)，會(huì)把已有的附件回填到附件上傳窗口。
配置如下：
html代碼
<input type="hidden" name="fileIds" id="fileIds"> <div class="form-group"> <div class="btn btn-default btn-file" id="uploadFile"> <i class="fa fa-paperclip"></i> 上傳附件(Max. 10MB) </div> </div> <div class="form-group" id="file_container"> <input type="file" name="file" id="attachment"> </div>
js代碼
$("#uploadFile").file({ title: "請(qǐng)上傳附件", fileinput: { maxFileSize: 10240, maxFileCount:3 }, fileIdContainer:"[name='fileIds']", showContainer:'#attachment', //顯示文件類型 edit=可編輯 detail=明細(xì) 默認(rèn)為明細(xì) showType:'edit', //彈出窗口 執(zhí)行上傳附件后的回調(diào)函數(shù)(window:false不調(diào)用此方法) window:true, callback:function(fileIds,oldfileIds){ //更新fileIds this.showFiles({ fileIds:fileIds }); } });
3、本地界面調(diào)用
本地界面調(diào)用附件上傳，如下圖所示：
將上傳附件嵌入到當(dāng)前界面方式
上傳后的附件可刪除、可預(yù)覽
（目前圖片文件可預(yù)覽，其他文件不可預(yù)覽，后期將集成txt/xml/html/pdf的預(yù)覽功能）
配置如下：
html代碼
<div class="form-group" id="file_container"> <input type="file" name="file" id="attachment"> </div>
js代碼
$("#attachment").file({ fileinput: { maxFileSize: 10240, maxFileCount:3 }, fileIdContainer:"[name='fileIds']", window:false });
4、控件參數(shù)說(shuō)明
window 默認(rèn)為true,彈窗方式打開
title window=true時(shí)配置，彈窗的標(biāo)題，默認(rèn)為“文件上傳”
width window=true時(shí)配置，彈窗的寬度，默認(rèn)900
winId window=true時(shí)配置，彈出的id，默認(rèn)為fileWin
fileinput Bootstrap-fileinput的配置參數(shù)，會(huì)覆蓋默認(rèn)配置，比如允許上傳哪種類型的附件allowedFileTypes，允許上傳最大附件大小maxFileSize，允許上傳附件的個(gè)數(shù)maxFileCount等，具體的配置參數(shù)可以查詢Bootstrap-fileinput的API文檔。
fileIdContainer 必須，上傳后的附件id存儲(chǔ)的位置，id以逗號(hào)分隔
showContainer window=true必須配置，文件上傳后回填的區(qū)域，window=false時(shí)如不配置，則取base-file的初始對(duì)象
showType window=true配置，值為edit或者detail,edit表示回填后可對(duì)數(shù)據(jù)進(jìn)行刪除、預(yù)覽，detail只能顯示，不能刪除