一、准備
1、插件下載地址：https://github.com/kartik-v/bootstrap-fileinput/ 下載后的壓縮包解壓文件夾內容如下：
js：插件核心js代碼，引用fileinput.min.js/fileinput.js即可，默認插件語言為英文，如需要中文需要引用js/locales/zh.js(其他語言引用相應的js文件)
js/plugins:相關輔助插件，piexif.min.js（resize image插件）、sortable.js（初始化預覽窗口縮略圖排序插件）、purify.js（看說明是凈化html代碼用的，試了下沒有搞明白具體有說明作用）
css：插件核心css代碼，fileinput.min.css/fileinput.css（核心css代碼，引用任何一個）、fileinput-rtl.min.css/fileinput-rtl.css(選用這組css，文件選擇框會和從右向左排列，即選擇文件等相關按鈕按鈕在左邊，文件框在右邊)
themes:主題，如需要插件主題樣式可引用主題文件夾下的相應js和css文件
查看示例：
打開壓縮包中的example/index.html或者訪問http://plugins.krajee.com/file-basic-usage-demo查看示例。可根據示例的代碼選擇需要的控件代碼使用。
2、代碼引用
需要引用jquery
需要結合bootstrap使用，即頁面需要引入bootstrap相關js和css文件
引用fileinput.js 和css
中文需要引用js/locales/zh.js
需要主題樣式時引用themes下相關文件夾中的js和css
tips：最好以上按順序引用，免得出現莫名其妙的問題，比如zh.js必須在fileinput.js后引用否則無效
二、使用示例
1、基本用法，自動將一個普通的input框渲染成高大上的文件上傳選擇框：
<input id="f_upload" type="file" class="file" />
只需要將class設置為file即可，效果如下：
2、隱藏文件預覽窗口
<input id="input-1a" type="file" class="file" data-show-preview="false">
設置屬性：data-show-preview=“false”，等同於初始化屬性：showPreview：false
效果如下：
3、使用input 屬性和data-**屬性創建多樣化的文件上傳框
<input id="input-2" name="input2" type="file fileloading" class="file" multiple readonly="false" disabled="false" data-show-upload="false" data-show-caption="true" data-show-preview="true" data-allowed-file-extensions='["jpg","png"]'>
屬性說明：
type="file fileloading" file表示此input框將被渲染為文件上傳控件，fileloading在選擇文件后產生預覽前會有友好的轉圈的loading提示（文件選擇多了后比較容易觀察到）
multiple：標識可以文件多選
readonly/disabled:這個不用解釋了噻
data-show-upload：等同於屬性showUpload，顯示上傳按鈕，同理有data-show-remove、data-show-cancel等詳見option
data-show-caption：顯示文件上傳的簡介
data-allowed-file-extensions：允許的文件后綴名，另外有data-allowed-file-types詳見option
.........
三、option選項說明：
| 屬性名 |
屬性類型 |
描述說明 |
默認值 |
| language |
String |
多語言設置，使用時需提前引入\locales文件夾下對應的語言文件， 中文zh，引入語言文件必須放在fileinput.js之后 |
'en' |
| showCaption |
Boolean |
是否顯示被選文件的簡介 |
true |
| showBrowse |
Boolean |
是否顯示瀏覽按鈕 |
true |
| showPreview |
Boolean |
是否顯示預覽區域 |
true |
| showRemove |
Boolean |
是否顯示移除按鈕 |
true, |
| showUpload |
Boolean |
是否顯示上傳按鈕 |
true, |
| showCancel |
Boolean |
是否顯示取消按鈕 |
true, |
| showClose: |
Boolean |
是否顯示關閉按鈕 |
true |
| showUploadedThumbs |
Boolean |
|
true |
| browseOnZoneClick |
Boolean |
|
false |
| autoReplace |
Boolean |
是否自動替換當前圖片，設置為true時，再次選擇文件， 會將當前的文件替換掉。 |
false |
| generateFileId |
Object |
|
null |
| previewClass |
String |
添加預覽按鈕的類屬性 |
‘’ |
| captionClass |
String |
|
‘’ |
| frameClass |
String |
|
'krajee-default' |
| mainClass |
String |
|
'file-caption-main' |
| mainTemplate |
Object |
|
null |
| purifyHtml |
Boolean |
|
true |
| fileSizeGetter |
Object |
|
null |
| initialCaption |
String |
|
'' |
| initialPreview |
Array/Object |
|
[] |
| initialPreviewDelimiter |
String |
|
'*$$*' |
| initialPreviewAsData |
Boolean |
|
false |
| initialPreviewFileType |
String |
|
'image' |
| initialPreviewConfig |
Array/Object |
|
[] |
| initialPreviewThumbTags |
Array/Object |
|
[] |
| previewThumbTags |
Object |
|
{} |
| initialPreviewShowDelete |
Boolean |
|
true |
| removeFromPreviewOnError |
Boolean |
|
false |
| deleteUrl |
String |
刪除圖片時的請求路徑 |
'' |
| deleteExtraData |
Object |
刪除圖片時額外傳入的參數 |
{} |
| overwriteInitial |
Boolean |
|
true |
| previewZoomButtonIcons |
Object |
|
{ prev: '<i class="glyphicon glyphicon-triangle-left"></i>', next: '<i class="glyphicon glyphicon-triangle-right"></i>', toggleheader: '<i class="glyphicon glyphicon-resize-vertical"></i>', fullscreen: '<i class="glyphicon glyphicon-fullscreen"></i>', borderless: '<i class="glyphicon glyphicon-resize-full"></i>', close: '<i class="glyphicon glyphicon-remove"></i>' }, |
| previewZoomButtonClasses |
Object |
|
{ prev: 'btn btn-navigate', next: 'btn btn-navigate', toggleheader: 'btn btn-default btn-header-toggle', fullscreen: 'btn btn-default', borderless: 'btn btn-default', close: 'btn btn-default' }, |
| preferIconicPreview |
Boolrean |
|
false |
| preferIconicZoomPreview |
Boolrean |
|
false |
| allowedPreviewTypes |
undefined |
|
undefined |
| allowedPreviewMimeTypes |
Object |
|
null |
| allowedFileTypes |
Object |
接收的文件后綴，如['jpg', 'gif', 'png'],不填將不限制上傳文件后綴類型 |
null |
| allowedFileExtensions |
Object |
|
null |
| defaultPreviewContent |
Object |
|
null |
| customLayoutTags |
Object |
|
{} |
| customPreviewTags |
Object |
|
{} |
| previewFileIcon |
String |
|
'<i class="glyphicon glyphicon-file"></i>' |
| previewFileIconClass |
String |
|
'file-other-icon' |
| previewFileIconSettings |
Object |
|
{} |
| previewFileExtSettings |
Object |
|
{} |
| buttonLabelClass |
String |
|
'hidden-xs' |
| browseIcon |
String |
|
'<i class="glyphicon glyphicon-folder-open"></i> ' |
| browseClass |
String |
|
'btn btn-primary' |
| removeIcon |
String |
|
'<i class="glyphicon glyphicon-trash"></i>' |
| removeClass |
String |
|
'btn btn-default' |
| cancelIcon |
String |
|
'<i class="glyphicon glyphicon-ban-circle"></i>' |
| cancelClass |
String |
|
'btn btn-default' |
| uploadIcon |
String |
|
'<i class="glyphicon glyphicon-upload"></i>' |
| uploadClass |
String |
|
'btn btn-default' |
| uploadUrl |
String |
上傳文件路徑 |
null |
| uploadAsync |
boolean |
是否為異步上傳 |
true |
| uploadExtraData |
|
上傳文件時額外傳遞的參數設置 |
{} |
| zoomModalHeight |
number |
|
480 |
| minImageWidth |
String |
圖片的最小寬度 |
null |
| minImageHeight |
String |
圖片的最小高度 |
null |
| maxImageWidth |
String |
圖片的最大寬度 |
null |
| maxImageHeight |
String |
圖片的最大高度 |
null |
| resizeImage |
boolean |
|
false |
| resizePreference |
String |
|
'width' |
| resizeQuality |
number |
|
0.92 |
| resizeDefaultImageType |
String |
|
'image/jpeg' |
| minFileSize |
number |
單位為kb，上傳文件的最小大小值 |
0 |
| maxFileSize |
number |
單位為kb，如果為0表示不限制文件大小 |
0 |
| resizeDefaultImageType |
number |
|
25600(25MB) |
| minFileCount |
number |
表示同時最小上傳的文件個數 |
0 |
| maxFileCount |
number |
表示允許同時上傳的最大文件個數 |
0 |
| validateInitialCount |
boolean |
|
false |
| msgValidationErrorClass |
String |
|
'text-danger' |
| msgValidationErrorIcon |
String |
|
'<i class="glyphicon glyphicon-exclamation-sign"></i> ' |
| msgErrorClass |
String |
|
'file-error-message' |
| progressThumbClass |
String |
|
"progress-bar progress-bar-success progress-bar-striped active" |
| rogressClass |
String |
|
"progress-bar progress-bar-success progress-bar-striped active" |
| progressCompleteClass |
String |
|
"progress-bar progress-bar-success" |
| progressErrorClass |
String |
|
"progress-bar progress-bar-danger" |
| progressUploadThreshold |
number |
|
99 |
| previewFileType |
String |
預覽文件類型,內置['image', 'html', 'text', 'video', 'audio', 'flash', 'object',‘other‘]等格式 |
'image' |
| elCaptionContainer |
String |
|
null |
| elCaptionText |
String |
設置標題欄提示信息 |
null |
| elPreviewContainer |
String |
|
null |
| elPreviewImage |
String |
|
null |
| elPreviewStatus |
String |
|
null |
| elErrorContainer |
String |
|
null |
| errorCloseButton |
String |
|
'<span class="close kv-error-close">×</span>' |
| slugCallback |
String |
暫時沒有搜到說明，調試顯示，在文件選擇后會調到這個方法。 |
null |
| dropZoneEnabled |
boolean |
是否顯示拖拽區域 |
true |
| dropZoneTitleClass |
String |
拖拽區域類屬性設置 |
'file-drop-zone-title' |
| fileActionSettings |
Object |
|
{} |
| otherActionButtons |
String |
|
'' |
| textEncoding |
String |
編碼設置 |
'UTF-8' |
| ajaxSettings |
Object |
|
{} |
| ajaxDeleteSettings |
Object |
|
{} |
| showAjaxErrorDetails |
boolean |
|
true |
7、Method說明：
| 方法名 |
參數 |
描述 |
| fileerror |
|
異步上傳錯誤結果處理 $('#uploadfile').on('fileerror', function(event, data, msg) { }); |
| fileuploaded |
|
異步上傳成功結果處理 $("#uploadfile").on("fileuploaded", function (event, data, previewId, index) { }) |
| filebatchuploaderror |
|
同步上傳錯誤結果處理 $('#uploadfile').on('filebatchuploaderror', function(event, data, msg) { }); |
| filebatchuploadsuccess |
|
同步上傳成功結果處理 $('#uploadfile').on('filebatchuploadsuccess', function(event, data, previewId, index) { }); |
| filebatchselected |
|
選擇文件后處理事件 $("#fileinput").on("filebatchselected", function(event, files) { }); |
| upload |
|
文件上傳方法 $("#fileinput").fileinput("upload"); |
| fileuploaded |
|
上傳成功后處理方法 $("#fileinput").
|
| filereset |
|
|
| fileclear |
|
點擊瀏覽框右上角X 清空文件前響應事件 $("#fileinput").on("fileclear",function(event, data, msg){ }); |
| filecleared |
|
點擊瀏覽框右上角X 清空文件后響應事件 $("#fileinput").on("filecleared",function(event, data, msg){ }); |
| fileimageuploaded |
|
在預覽框中圖片已經完全加載完畢后回調的事件
|
8、常見問題與錯誤
8.1 引入所需文件后頁面刷新查看樣式奇怪，瀏覽器提示錯誤等，可能是因為js、css文件的引用順序問題，zh.js需要在fileinput.js后面引入。bootstrap最好在fileinput前引入。
8.2 文件上傳控件在使用$("form").serializeArray()時無法直接讀取值，可以通過在文件上傳完成后（fileuploaded）給一個隱藏的input框賦值的方式獲取form值。
舉例場景：
form表單中包含文件上傳控件，需要在選擇文件后不立刻上傳，在點擊form表單提交按鈕后先上傳文件，成功后提交表單。