bootstrap-fileinput詳細說明與使用

介紹

bootstrap-fileinput是一款很是優秀的HTML5文件上傳插件，支持文件預覽、多文件上傳等一系列特性。

一款很是優秀的HTML5文件上傳插件，支持bootstrap 3.x 和4.x版本，具備很是多的特性:多文件類型上傳。這個插件能最簡單的幫你完成文件上傳功能，且使用bootstrap樣式。還支持多種文件的預覽，images, text, html, video, audio, flash。另外還支持ajax方式上傳文件，能夠看到上傳進度。支持拖拽的方式添加和刪除文件。

插件特性

注意

這個插件的最新版本是v4.4.0（開發中）。 有關詳細信息，請參閱更改日誌。 插件特性主要有兩方面：

文件輸入特性

一、  該插件將一個簡單的HTML文件輸入轉換爲高級文件選擇器的控件。在不支持JQuery或Javascript的瀏覽器中將幫助回退到普通HTML文件輸入。

二、  文件輸入由如下三個部分組成，每一個部分都包含用於控制顯示的選項和模板：

• 文件標題部分：顯示所選文件的簡要信息。
• 文件操做按鈕部分：瀏覽，刪除和上傳文件。
• 文件預覽部分：在客戶端上顯示所選文件進行預覽（支持預覽圖像，文本，Flash和視頻文件類型）。其餘文件類型將顯示爲默認的縮略圖。

三、  若是設置<input>標籤的class屬性爲file，該插件將自動將它轉換爲type屬性爲file的高級文件輸入選擇器。高級文件輸入選擇器的全部參數均可以經過HTML5的data-*屬性傳遞。

四、  可以選擇和預覽多個文件。使用HTML5文件閱讀器API來讀取和預覽文件。在選擇多個文件的狀況下顯示正在加載到預覽區域的每一個文件的進度。

五、  提供預約義的模板和CSS類，能夠根據您的須要更改您的文件輸入顯示風格。

六、  可以配置插件初始化具備初始標題的images/files類型文件預覽 （對於記錄更新場景頗有用）。initialPreview、 initialPreviewConfig 和initialCaption 屬性來配置它。

七、  可以將簡要預覽內容縮放爲詳細預覽。在預覽中查看縮放內容的幻燈片，最大限度地實現無邊界或全屏預覽。

八、  可以經過拖放操做在初始預覽中對內容進行排序/重排。

九、  可以徹底主題化控件，並控制樣式和佈局。

十、 經過語言/翻譯支持同一頁面上的多語言控件。

十一、 顯示/隱藏任何或全部如下內容的選項：

十二、自定義顯示整個插件，標題容器，標題文本，預覽容器，預覽圖像和預覽狀態的目標容器元素的位置。

1三、 對於文本文件預覽，將文本自動縮隱爲縮略圖寬度，並顯示一個縮略指示器連接，以便在懸停時顯示完整的文本。您能夠自定義縮略符（默認爲...）。

1四、 自定義預覽，進度和所選文件的消息。

1五、上傳操做默認爲表單提交。支持用於自定義基於ajax的上傳的route/server上傳動做參數。

1六、 觸發JQuery事件進行高級開發。目前可用的事件有filereset、fileclear、filecleared、fileloaded，和fileerror。

1七、 支持輸入禁用文件和只讀文件。

1八、 動態自動調整文件名長度超過容器寬度的文件標題。

1九、 當預覽容器上徹底載入圖像後，觸發的新的fileimageuploaded事件。

20、 當預覽圖超過預覽容器的大小時自動調整預覽圖像。

2一、 徹底模板化和可擴展，容許開發人員以本身想要的方式配置文件輸入。

2二、 基於各類文件預覽類型智能化預覽。內置的文件支持類型分類爲image、text、html、video、audio、flash、object和other。

2三、allowedPreviewTypes:你能夠配置哪些文件類型被容許預覽顯示。默認值爲['image', 'html', 'text', 'video', 'audio', 'flash', 'object']。所以，默認狀況下，全部文件類型都將被視爲要預覽的對象。 舉個例子，若是隻想展現圖像和視頻的預覽，就將這個參數設置爲['image', 'video']。若是要禁用全部文件類型的內容預覽，並用預覽圖標代替縮略圖，請將其設置爲null、empty或false。

2四、allowedPreviewMimeTypes:除了參數allowedPreviewTypes，你還能夠控制哪些互聯網媒體類型能夠預覽。它的默認值爲null，表示支持全部互聯網媒體類型。請注意： 使用版本2.5.0，你能夠經過設置allowedFileTypes和allowedFileExtensions參數來控制容許上傳的文件類型或擴展功能。

2五、 layoutTemplates:容許你經過一個屬性來配置全部佈局模板設置。可配置的佈局對象有：main1、main2、preview、caption和 modal。

2六、 previewTemplates:全部用於每一個預覽類型的預覽模板已被組合成一個屬性，而不是單獨用於圖像，文本等內容的模板。表示格式的鍵爲allowedPreviewTypes，值表示預覽模板。下面是每一個預覽文件類型（generic、image、text、html、video、audio、flash, object和other）。generic模板僅用於使用直接的標籤來展現initialPreview內容。

2七、previewSettings:容許你爲每一個預覽圖像類型配置寬度和高度。該插件對每一個類型都具備默認的寬度和高度預約義，這些類型有image、text、 html、video、audio、flash和 object。

2八、 fileTypeSettings:容許你使用回調函數配置和識別每一個預覽文件類型。該插件有默認的回調函數預約義來識別不一樣類型，這些類型有image、text、 html、video、audio、flash和 object。

2九、使用模板替換標籤已被加強。使用此版本，它將自動檢查每一個屢次出現的標籤替換的爲模板字符串。

30、操做事件，並輕鬆地在任何停止上傳的事件返回的輸出中添加您本身的自定義驗證消息。

3一、支持翻譯和語言環境。

注意

Flash預覽須要安裝Shockwave flash而且客戶端瀏覽器支持它。Flash預覽目前只能與webkit瀏覽器成功運做。支持HTML5 video/audio標籤的全部現代瀏覽器都支持視頻和音頻格式預覽。請注意，瀏覽器的HTML5視頻元素支持的視頻/音頻格式數量有限（例如mp4，webm，ogg，mp3，wav）。視頻文件推薦使用小視頻（經過maxFileSize 屬性進行控制），這樣不會不影響預覽效果。你能夠從插件庫的examples目錄下複製幾個文件，來測試一些Flash和視頻文件的示例。

文件上傳特性

伴隨着版本4.0.0，插件如今也包括內置AJAX上傳支持和有選擇地添加或刪除文件。AJAX上傳功能基於HTML5 FormData和XMLHttpRequest Level 2標準。大多數現代瀏覽器都支持此標準，但插件在不支持的瀏覽器中將自動降級爲正常格式提交。

1. 添加AJAX功能，基於HTML5 FormData大多數現代瀏覽器支持）上傳方式。若是不支持，將降級到正常的基於表單的文件提交。
2. 要使用AJAX上傳，必須設置uploadUrl屬性。
3. 加強插件，如今容許添加，附加，刪除文件（基於許多的反饋）。所以，能夠附加文件到預覽。
4. 能夠經過DRAG & DROP區域來拖放和附加文件。New DRAG & DROP zone available in preview to drag and drop files and append.
5. 逐個或批量刪除、上傳文件。
6. 若是showPreview設置爲false，或者未設置uploadUrl，插件將降級到基於正常的form形式上傳。
7. 可配置指示燈來同步文件等待上傳，文件成功上傳，文件上傳錯誤狀態。
8. 可以添加額外的表單數據到基於ajax的上傳中。
9. 上傳進度條和單個縮略圖的上傳標識。
10. 可以取消和停止正在進行的AJAX上傳。
11. 創建初始預覽內容（例如保存的圖像庫）。您能夠設置初始預覽操做（預約義支持預先預覽刪除）。也能夠設置其餘自定義操做按鈕初始化預覽縮略圖。
12. 確保插件仍然尺寸精簡，並最佳地利用HTML5和jquery功能優化上述功能的性能。
13. 一旦ajax上傳完成，就自動從服務器上刷新預覽內容。

安裝

可使用如下方法之一自動或手動安裝該插件：

Bower包管理器

經過bower包管理器進行安裝，運行下面簡單的指令：

$ bower install bootstrap-fileinput

Composer包管理器

經過Composer包管理器進行安裝，運行指令：

$ php composer.phar require kartik-v/bootstrap-fileinput "dev-master"

或者添加：

"kartik-v/bootstrap-fileinput": "dev-master"

到你的composer.json文件中。

依賴項

1. Bootstrap 3.X。可是，可使用任何CSS框架模板來定製插件。
2. 最新的JQuery
3. 大多數支持HTML5文件輸入和FileReader API的現代瀏覽器，包括對CSS3和JQuery的支持。
4. 爲了正常使用文件預覽功能，瀏覽器必須支持HTML5 FileReaderAPI，不然插件會自動降級到普通的表單文件輸入。對於Internet Explorer，必須使用IE 10及更高版本。IE9及如下版本將做爲普通文件輸入，而且不支持多個文件選擇和HTML5 FileReader API。
5. 版本4.0支持AJAX上傳。AJAX上傳要求瀏覽器支持HTML5 FormData和XHR2（XMLHttpRequest 2）。大多數現代瀏覽器支持FormData和XHR2。該插件在不支持AJAX上傳的瀏覽器中將自動降級到正常表單提交。

瀏覽器支持

該插件使用HTML5功能來實現各類功能。大多數現代瀏覽器支持這些功能。可是，要知道你的瀏覽器是否支持這些功能，你必須在下面運行這些檢查。如下是檢測瀏覽器是否支持

功能	描述	支持
文件輸入多個	容許用戶使用本機HTML文件輸入選擇多個文件	瀏覽器
HTML5文件API	容許使用插件在預覽窗格上閱讀和預覽文件	瀏覽器
HTML5 XHR2和FormData	容許使用ajax上傳功能來附加/刪除文件並使用進度條進行跟蹤。	瀏覽器
HTML5拖放	可以將文件拖放到一個Dropzone（僅適用於使用HTML5 XHR2的ajax上傳）	瀏覽器
HTML5畫布	經過JavaScript管理圖像文件。若是你但願在上傳以前調整圖像文件的大小，則必需支持此功能。	瀏覽器

 

 

 

 

 

 

 

 

 

 

 

使用模式

大多數狀況下，該插件能夠配置爲如下兩種不一樣的模式之一進行上傳。

重要信息：不要嘗試組合下列模式來接收文件數據，由於您將收到不一致和/或錯誤的輸出。

一、表單提交：在此模式下，您不能設置uploadUrl屬性。該插件將使用本地文件輸入來存儲文件，而且能夠在正常的from提交後讀取文件（您必須在form中包含類型爲file的input標籤）。這對於單個文件上傳或簡單的場景多個文件上傳是有用的。配置很是簡單，你能夠從本機表單提交中讀取POSTED的全部數據。可是，請注意，本地文件輸入是隻讀的，不能被外部代碼修改或更新。特別是對於多個文件輸入選擇，沒法將單個文件增長到已選擇的文件列表。若是嘗試在已選擇的文件輸入按鈕上再選擇文件，它將覆蓋並清除以前選擇的文件。一樣，在此模式下，沒法選擇移去/刪除上傳以前添加的文件。

二、Ajax提交：在此模式下，你必須將uploadUrl屬性設置爲有效的ajax處理服務器action/URL。若是uploadUrl設置了，那麼該插件會自動爲該場景使用ajax上傳。該插件提供了ajax提交的高級功能，這是表單提交提供不了的。如拖放文件，在預覽區域中添加/刪除文件，獲取上傳的進度條等功能只有在此模式下才能夠實現。您的瀏覽器必須支持HTML5 FormData/XHR2才能正常工做，而且處理ajax調用的服務器代碼必須返回有效的JSON響應。

注意 做爲高級場景，插件容許你處理ajax上傳，即便沒有選擇文件，可是使用有效的uploadExtraData也會獲得ajax響應。這些事件filebatchpreupload、filebatchuploadsuccess、filebatchuploadcomplete或 filebatchuploaderror將在這種狀況下觸發。即便沒有任何的文件數據，它將容許發送額外的數據。

功能/要求	表格提交	Ajax提交
支持單個和多個文件上傳	支持	支持
使用HTML 5 FileAPI預覽文件	支持	支持
經過表單提交直接讀取文件	支持	不支持
每一個預覽縮略圖的單個文件刪除圖標	支持 1	支持2
每一個預覽縮略圖的我的文件上傳圖標	不支持	支持
須要從服務器返回有效的JSON響應	不支持	支持
須要瀏覽器支持HTML5 FormData / XHR2	不支持	支持
服務器代碼來處理ajax併發送JSON Response	不支持	支持
使用放置區拖放文件	不支持	支持
可以將文件附加到已選擇的列表	不支持	支持
可以將文件刪除到已選擇的列表	支持 1	支持
上傳進度欄	不支持	支持
閱讀其餘表單數據	直接經過表單提交	經過 uploadExtraData

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

模式比較

• 1 -經過initialPreviewConfig（僅適用於服務器上傳的文件）。
• 2 - 在運行環境中對服務器上傳的文件（經過initialPreviewConfig）和客戶端選擇的文件。

用法

注意

若是你將一個css class='file'屬性賦予input標籤，插件將自動把字段[input type="file"]轉換爲文件輸入控件。可是，若是你想經過javascript單獨初始化插件，那麼請勿將css class='file'屬性附加到'input'上（由於這將致使重複的初始化，而且JavaScript代碼可能會被跳過不執行）。

步驟1

在網頁頭部加入連接。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

<link href="path/to/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- 若是你想在上傳以前修改圖片大小須要加入canvas-to-blob.min.js  它必須在fileinput.min.js以前引入 -->

<script src="path/to/js/plugins/canvas-to-blob.min.js" type="text/javascript"></script>

<!-- 若是你想在最初的預覽中排序/從新排列須要引入sortable.min.js  它必須在fileinput.min.js以前引入 -->

<script src="path/to/js/plugins/sortable.min.js" type="text/javascript"></script>

<!-- 若是你想在HTML文件預覽中淨化HTML內容則要引入purify.min.js is   它必須在fileinput.min.js以前引入 -->

<script src="path/to/js/plugins/purify.min.js" type="text/javascript"></script>

<!-- 主要的 fileinput 插件庫 -->

<script src="path/to/js/fileinput.min.js"></script>

<!-- 若是你想在放大的模態頁面中查看文件詳細信息須要引入bootstrap.js -->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>

<!-- 可選，若是你須要像font awesome 這樣的主題，就像下面的代碼同樣引入它 -->

<script src="path/to/js/fa.js"></script>

<!-- 可選，若是你須要轉換語言或翻譯，就包含這個庫 -->

<script src="path/to/js/<lang>.js"></script>

你可能注意到了，除了fileinput.min.css和fileinput.min.js外，你必需要加載jquery.min.js和bootstrap.min.css。可選擇加入fa.js主題文件來使用font awesome圖標樣式。

GitHub 地址：https://github.com/kartik-v/bootstrap-fileinput

 

可選的依賴插件

• canvas-to-blob.min.js文件：是blueimp的JavaScript-Canvas-to-Blob插件的源代碼。若是你想在上傳以前修改圖片大小,在fileinput.min.js以前須要先加載它。
• sortable.min.js文件：是rubaxa可排序插件的源代碼。若是你但願在初始預覽中對縮略圖進行排序，則須要先加載它。
• purify.min.js文件：是cure53的DomPurify插件的源代碼。若是你但願淨化預覽的HTML內容，則須要加載它。
• 中文須要引用js/locales/zh.js
• 以下引入文件：

<script src="~/Scripts/bootstrap-fileinput-master/js/fileinput.min.js"></script>

<script src="~/Scripts/bootstrap-fileinput-master/themes/explorer/theme.js"></script>

<script src="~/Scripts/bootstrap-fileinput-master/js/locales/zh.js"></script>

步驟2

在你的頁面中初始化這個插件，像下面的樣例代碼同樣： JavaScript // 使用默認參數初始化插件 $("#input-id").fileinput();

$fileinput.fileinput({

            language: 'zh', //設置語言

            //theme: "explorer",

            uploadUrl: "/api/datareportapi/upload",

            allowedFileExtensions: ['xlsx','txt','zip','rar'],//接收的文件後綴

            uploadClass: "btn btn-sm btn-success",

            removeClass: "btn btn-sm btn-danger",

            cancelClass: "btn btn-sm btn-default",

            browseClass: "btn btn-sm btn-primary", //按鈕樣式 

            enctype: 'multipart/form-data',

            minFileCount: 1,

            //maxFileCount: 5,

            overwriteInitial: false,

            previewFileIcon: '<i class="fa fa-file"></i>',

            uploadExtraData: function (previewId, index) {

                return { batch: _configMap.batch, type: _configMap.type };

            },

            preferIconicPreview: true, // this will force thumbnails to display icons for following file extensions

            previewFileIconSettings: { // configure your icon file extensions

                'xls': '<i class="fa fa-file-excel-o text-success"></i>',

                'xlsx': '<i class="fa fa-file-excel-o text-success"></i>'

            },

            previewFileExtSettings: { // configure the logic for determining icon file extensions

                'xls': function (ext) {

                    return ext.match(/(xls|xlsx)$/i);

                }

            }

        })

// 使用插件參數初始化 $("#input-id").fileinput({'showUpload':false, 'previewFileType':'any'});

`#input-id`是你頁面中`input`標籤（即，`type=file`）的id值，經過插件初始化這個標籤會自動隱藏。

##步驟2

或者，你能夠直接將插件選項設置爲任何輸入，經過HTML5的`data-*`屬性到你的輸入域。

```html

<input id="input-id" type="file" class="file" data-preview-file-type="text">

最後呈現效果圖以下:

 

Ajax上傳

你須要設置服務器方法經過AJAX來解析並返回正確的響應。你能夠按異步或同步模式設置上傳，以下所述。

• 異步上傳
• 同步上傳

異步上傳

這是默認模式，也就是說uploadAsync屬性設置爲true。當上傳多個文件時，異步模式容許觸發並行調用服務器方法接受每一個上傳文件。您能夠經過設置maxFileCount屬性來控制一次容許上傳的最大文件數。在異步模式下，預覽中每一個縮略圖的進度被驗證和更新。

接收數據（在服務器上）

你設置的服務器方法（uploadUrl）從插件接收如下數據:

文件數據:以與form文件輸入很是類似的格式將這些數據發送到服務器。例如，在PHP中，你可使用代碼$_FILES['input-name']讀取文件數據，input-name是你的input標籤的name屬性。若是你沒有爲input標籤設置name屬性，則它的名稱默認爲file_data。請注意，多個文件上傳須要你爲input標籤設置multiple屬性爲true。這樣在PHP中你會收到文件數據$_FILES['file_data']。（servlet中使用request.getParts()獲取多個文件數據，使用request.getParts("input-name")獲取單個文件）

額外的數據：該插件能夠向你的服務器方法發送附加數據。這能夠經過將uploadExtraData設置爲鍵值對關聯數組對象來完成。因此若是你設置uploadExtraData={id:'kv-1'}，在PHP中你能夠以$_POST['id']的方式讀取這些數據。

注意

在異步模式下，你會常常在處理ajax上傳的服務端接收到單個的文件數據。基本上，這個插件對每一個上傳的文件都會觸發並行的ajax調用方法。你須要相應地編寫服務器上傳邏輯，以便您始終讀取和上傳單個文件。一樣，在下面的發送數據部分中，你必須返回一個initialPreview，它反映收到的單個文件的數據。

發送數據（從服務器）

你的服務器方法（uploadUrl）必須返回一個json編碼對象數據。在這種狀況下，您能夠發送這4個信息。請注意，在異步模式下，您會始終從服務器收到一個文件的記錄 - 所以你也要相應地調整前端JS代碼。

error：string類型，它是整個批量上傳的錯誤消息，並將幫助插件識別文件上傳中的錯誤。例如，來自服務器的響應像{error: 'You are not allowed to upload such a file.'}這樣。注意：插件將自動驗證並顯示ajax異常錯誤。

initialPreview：數組，圖像文件列表或任何指向你上傳文件的HTML標記。你會常常發送此隊列中的一行，由於你在異步方式會一直收到上傳的單個文件。若是設置了此屬性，插件會在每一個文件上傳成功後動態地在預覽內容中替換文件。這個配置相似於initialPreview選項設置。例如：

initialPreview: [

"<img src='/images/desert.jpg' class='file-preview-image' alt='Desert' title='Desert'>"   ,

],

initialPreviewConfig：數組，用於標識initialPreview條目（即initialPreview的一部分）中每一個文件標記的屬性的配置。你會始終發送這個隊列中一行，由於你始終以異步方式收到上傳的一個文件。若是設置了此屬性，插件會在每一個文件上傳成功後自動在預覽內容中替換文件。這個配置相似於initialPreviewConfig選項設置。例如：

initialPreviewConfig：[

    {

'desert.jpg'       標題:， 

'120px'        width:， 

'http://localhost/avatar/delete'//服務器刪除操做          url:，

100        關鍵:， 

100        extra:{id:} 

    }

]

initialPreviewThumbTags：數組，每一個初始預覽縮略圖相對應的替換標籤對象數組。經過initialPreview設置的初始預覽縮略圖會讀取此配置爲替換標籤。

//更改縮略圖頁腳模板

//設置初始預覽模板標籤

initialPreviewThumbTags：[

    {

'{CUSTOM_TAG_NEW}'''       :,

'{CUSTOM_TAG_INIT}''<span class = \'custom-css\'>CUSTOM MARKUP</span> '        :

    }

];

append：boolean類型，若是你已經在INIT中設置了initialPreview是否將內容插入initialPreview。若是未設置，則默認爲true。若是設置false，插件將覆蓋initialPreview內容。

重要

• 你必須從服務器發送有效的JSON響應，不然上傳過程將失敗。即便您沒有遇到任何錯誤，您至少必須從服務器發送一個空的JSON對象{}。
• 要捕獲並顯示驗證錯誤，你的JSON響應數據必須包含該error鍵，其值將是要顯示的錯誤HTML標記。如上所述那樣設置。
• 你還可使用JSON響應發送附加的密鑰或數據，以便使用諸如fileuploaded此類的事件對高級案例進行處理

同步上傳

在此模式下，uploadAsync屬性設置爲false。它只會觸發一次批量上傳到服務器的方法，並將文件以對象數組的方式從客戶端發送到服務器。儘管在此模式下，你能夠經過設置maxFileCount屬性來控制一次容許上傳的最大文件數。然而，在同步模式下，進度只會是對於總體水平的一個標量。預覽中每一個縮略圖的進度未被精確計算和更新。可是，該插件爲你提供了識別每一個文件上傳錯誤的方法。

接收數據

你設置的uploadUrl服務器方法從插件接收如下數據:

文件數據：以與表單輸入格式很是類似的格式將該數據發送到服務器。例如，在PHP中，您能夠將該數據讀取爲$_FILES['input-name']，input-name是你的輸入標籤的name屬性。和以前的異步模式相同，若是你沒有爲輸入標籤設置名稱屬性，則該名稱將默認爲file_data。除了將multiple屬性設置爲true以外，你必須將輸入標籤的name屬性設置爲網頁提示中提到的數組格式。若是你不將輸入名稱設置爲數組格式，那麼你只能在服務器上收到第一個文件。在PHP中，你將收到文件數據$_FILES['input-name']，它將是一組文件對象。

額外的數據：該插件能夠向你的服務器方法發送附加數據。這能夠經過設置uploadExtraData爲鍵值對關聯數組對象來完成。因此若是你有設置uploadExtraData={id:'kv-1'}，在PHP中你能夠像$_POST['id']這樣讀取這些數據。

發送數據

在同步模式下，uploadUrl必須發送json編碼對象數據做爲響應。在這種狀況下，你須要發送這5條信息。

error：字符串類型，它是整個批量上傳的錯誤消息，並將幫助插件識別文件上傳中的錯誤。

errorkeys：數組類型，已經出錯的文件的鍵值（接收的文件數據的基於零的索引）。根據這些數據，插件會自動設置縮略圖和每一個預覽文件的錯誤。

initialPreview：數組類型，圖像文件列表或任何指向你上傳文件的HTML標記。若是設置了此屬性，插件會在上傳成功後自動在預覽內容中替換文件。這個配置相似於initialPreview選項設置。例如：

initialPreview: [

'<img src='' class='' alt='' title=''>'   /images/desert.jpgfile-preview-imageDesertDesert,

'<img src='' class='' alt='' title=''>'   /images/jellyfish.jpgfile-preview-imageJelly FishJelly Fish,

],

initialPreviewConfig：數組類型，用於標識initialPreview條目中每一個文件標記（即做爲initialPreview的一部分進行設置）的屬性的配置。若是設置了此屬性，插件會在上傳成功後自動在預覽內容中替換文件。這個配置相似於initialPreviewConfig選項設置。例如：

initialPreviewConfig: [

    {

'desert.jpg'        caption:,

'120px'        width:,

'http://localhost/avatar/delete'// 服務器刪除行爲        url:,

100        key:,

100        extra: {id:}

    },

    {

'jellyfish.jpg'        caption:,

'120px'        width:,

'http://localhost/avatar/delete'// 服務器刪除行爲        url:,

101        key:,

function()         extra:{

return'#id'            {id: $().val()};

        },

    }

]

initialPreviewThumbTags：數組類型，對應於每一個初始預覽縮略圖中替換標籤的對象數組。經過設置initialPreview的初始預覽縮略圖將讀取此配置以替換標籤。

//更改縮略圖頁腳模板

//設置初始預覽模板標籤

initialPreviewThumbTags:[

    {

'{CUSTOM_TAG_NEW}'' '       :,

'{CUSTOM_TAG_INIT}''<span class=\'custom-css\'>CUSTOM MARKUP 1</span>'       :

    },

    {

'{CUSTOM_TAG_NEW}'' '       :,

'{CUSTOM_TAG_INIT}''<span class=\'custom-css\'>CUSTOM MARKUP 2</span>'       :

    }

];

append：布爾類型，若是你在初始化時設置了initialPreview，是否將新的內容附加到initialPreview中。若是未設置，則默認爲true。若是設置爲false，插件將覆蓋initialPreview內容。

例如，來自服務器的響應將發送{error: 'You have faced errors in 4 files.', errorkeys: [0, 3, 4, 5]}做爲響應。注意：插件將自動驗證並顯示ajax異常錯誤。

重要

你必須從服務器發送有效的JSON響應，不然上傳過程將失敗。即便您沒有遇到任何錯誤，您至少必須從服務器發送一個空的JSON對象。

要捕獲並顯示驗證錯誤，你的JSON響應數據必須包含該error鍵，其值將是要顯示的錯誤HTML標記。另外，您還必須發送errorkeys同步模式來識別面臨錯誤的文件的密鑰。這將如上所述設置。

你還可使用JSON響應發送附加的密鑰或數據，以便使用如filebatchuploadsuccess事件對高級案例進行處理

方法

這個插件支持以下方法。查看插件各類方法的演示，請點擊這裏。

下面的許多方法支持鏈式調用其餘方法，由於它們將文件輸入元素做爲jQuery對象返回。

disable

禁用文件輸入控件。此方法將文件輸入元素做爲jQuery對象返回，所以能夠鏈式調用其餘方法。

'#input-id''disable'$().fileinput();

// 鏈式調用啓用輸入控件

'#input-id''disable''enable'$().fileinput().fileinput();

enable

啓用文件輸入控件。此方法將文件輸入元素做爲jQuery對象返回，所以能夠鏈式調用其餘方法。

'#input-id''enable'$().fileinput();

// 鏈式調用禁用輸入控件

'#input-id''enable''disable'$().fileinput().fileinput();

reset

重置文件輸入控件。此方法將文件輸入元素做爲jQuery對象返回，能夠鏈式調用其餘方法。

'#input-id''reset'$().fileinput();

// 鏈式調用

'#input-id''reset''custom-event'$().fileinput().trigger();

destroy

銷燬文件輸入控件並恢復到普通的本地文件輸入。此方法將文件輸入元素做爲jQuery對象返回，所以能夠鏈式調用其餘方法。

'#input-id''destroy'$().fileinput();

// 鏈式方法

'#input-id''destroy''disable'$().fileinput().fileinput();

refresh

根據提供的參數刷新文件輸入控件。你能夠提供一組控件選項做爲參數。此方法將文件輸入元素做爲jQuery對象返回，所以能夠鏈式調用其餘方法。

// 例1（在運行時禁用）

'#input-id''disabled''disabled'$().attr(,);

'#input-id''refresh'$().fileinput();

// 例2（在運行時修改插件參數）example 2 (modify plugin options at runtime)

'#input-id''refresh''Select...''Delete'$().fileinput(, {browseLabel:, removeLabel:});

// 鏈式方法

'#input-id''refresh'false'disable'$().fileinput(, {showCaption:}).fileinput();

clear

清理文件輸入控件。此方法將文件輸入元素做爲jQuery對象返回，所以能夠鏈式調用其餘方法。

'#input-id''clear'$().fileinput();

// 方法鏈

'#input-id''clear''disable'$().fileinput().fileinput();

upload

觸發所選文件的ajax上傳。僅適用於uploadUrl已設置的狀況。此方法將文件輸入元素做爲jQuery對象返回，所以能夠鏈式調用其餘方法。

'#input-id''upload'$().fileinput();

// 方法鏈

'#input-id''upload''disable'$().fileinput().fileinput();

cancel

取消正在進行的ajax文件上傳。此方法將文件輸入元素做爲jQuery對象返回，所以能夠鏈式調用其餘方法。

'#input-id''cancel'$().fileinput();

// 方法鏈

'#input-id''cancel''disable'$().fileinput().fileinput();

lock

鎖定文件輸入控件，禁用除取消按鈕（停止正在進行的AJAX請求）以外的全部操做/按鈕。（僅適用於ajax上傳）此方法將文件輸入元素做爲jQuery對象返回，所以能夠鏈式調用其餘方法。

'#input-id''lock'$().fileinput();

// 方法鏈

'#input-id''lock''disable'$().fileinput().fileinput();

unlock

經過反轉lock動做的結果解鎖並從新啓動文件輸入控件。此方法將文件輸入元素做爲jQuery對象返回，所以能夠鏈式調用其餘方法。

'#input-id''unlock'$().fileinput();

// 方法鏈

'#input-id''unlock''disable'$().fileinput().fileinput();

addToStack

此方法將文件對象推入（追加）到用來上傳的緩存文件堆棧數組。你必須傳入一個文件對象做爲參數。

'#input-id''addToStack'// `fileObj`是文件blob對象實例$().fileinput(, fileObj);

updateStack

此方法用指定的數組索引更新/重載一個緩存文件堆棧數組中的文件對象，以指定數組索引。你必須傳入數組索引數和文件對象做爲參數。

'#input-id''updateStack'$().fileinput(, index, fileObj);

// `index`是你要更新/重載的`fileObj`的緩存文件數組索引。

clearStack

此方法清除整個文件上傳數組堆棧。

'#input-id''clearStack'$().fileinput();

getFileStack

這個方法返回已選擇選擇文件對象數組（只有當uploadurl被設置且進行ajax上傳時適用。）這個方法不會返回驗證失敗或者已經上傳的文件。

var'#input-id''getFileStack'// 返回選中的文件隊列files = $().fileinput();

如上所述，請注意，此方法僅對於爲ajax上傳獲取文件對象很是有用。對於正常的基於表單的提交，你能夠經過直接讀取輸入值來獲取選定的文件。例如$('#input-id').val()。

getFilesCount

此方法返回全部待上傳的文件和已上傳的文件（基於初始預覽）的計數。計數將包括從客戶端（未上傳）中選擇的文件加上傳到服務器並經過初始預覽顯示的文件。validateInitialCount將用於檢查是否使用初始預覽計數。當設置uploadUrl時，此方法將返回正常表單提交以及ajax上傳的文件數。

var'#input-id''getFilesCount'// 返回文件（已經上傳和等待上傳）計數filesCount = $().fileinput();

zoom

放大縮小傳入幀ID參數的詳細預覽內容。

'#input-id''zoom''preview-123882'// 傳入縮略圖框架的HTML id。$().fileinput(,);

getPreview

返回初始預覽內容，初始預覽配置和初始預覽縮略圖標籤。做爲下列格式的對象（關聯數組）返回結果：

{

'content1''content2'    content: [,],

    config: [

        {

// content1 的初始化預覽配置            

        },

        {

// content2 的初始化預覽配置            

        },

    ],

    tags: [

        {

// content1 的初始化預覽標籤            

        },

        {

// content2 的初始化預覽標籤            

        },

    ]

}

使用範例：

console'#input-id''getPreview'.log($().fileinput());

事件

該插件支持各類事件，並容許高級功能，如返回事件結果來驗證和動態操做文件上傳。該部分分爲文件事件，異常事件和事件處理。

• 文件事件
• 異常事件
• 事件處理

文件事件

可用於文件管理和文件操做的事件。

change

只要經過文件瀏覽按鈕在文件輸入控件中選擇單個文件或多個文件，就會觸發此事件。

範例：

'#input-id''change'function(event)     $().on(,{

console"change"       .log();

    });

fileselect

經過文件瀏覽按鈕在文件輸入中選擇文件後觸發此事件。這與change事件稍有不一樣，即便文件瀏覽對話框被取消，它也會被觸發。

範例：

'#input-id''fileselect'function(event, numFiles, label)     $().on(,{

console"fileselect"       .log();

    });

fileclear

當文件輸入刪除按鈕或預覽窗口關閉圖標被按下以清除文件預覽時觸發此事件。

範例：

'#input-id''fileclear'function(event)     $().on(,{

console"fileclear"       .log();

    });

filecleared

在預覽中的文件被清除後觸發此事件。

範例：

'#input-id''filecleared'function(event)     $().on(,{

console"filecleared"       .log();

    });

fileloaded

在預覽中加載文件後觸發此事件。附加參數有：

• file：文件對象實例
• previewId：預覽文件容器的標識符（id）
• index：預覽列表中加載的文件的基於0的順序索引
• reader：:FileReader實例，若是瀏覽器支持它

範例：

'#input-id''fileloaded'function(event, file, previewId, index, reader) $().on(,{

console"fileloaded"   .log();

});

filereset

當文件輸入被重置爲初始值時觸發此事件。

範例：

'#input-id''filereset'function(event)     $().on(,{

console"filereset"       .log();

    });

fileimageloaded

每一個圖像文件在預覽窗口中徹底加載時觸發此事件。它只適用於圖像文件預覽且showPreview設置爲true的狀況。附加參數有：

• previewId：預覽文件容器的id。

範例：

'#input-id''fileimageloaded'function(event, previewId)     $().on(,{

console"fileimageloaded"       .log();

    });

fileimagesloaded

全部圖像文件在預覽窗口中徹底加載時觸發此事件。它只適用於圖像文件預覽且showPreview設置爲true的狀況。

範例：

'#input-id''fileimagesloaded'function(event)     $().on(,{

console"fileimagesloaded"       .log();

    });

fileimageresized

當一個預覽的圖像文件因爲resizeImage或者maxImageWidth/maxImageHeight設置而發生調整時觸發這個事件。它只適用於圖像文件預覽且showPreview設置爲true的狀況。附加參數以下：

• previewId：預覽文件容器的標識符（id）
• index：預覽列表中加載的文件的基於0的順序索引

當預覽中全部圖像文件都發生調整後，上述事件將再次觸發，無任何上述參數（即，previewId和index 值爲 undefined）。

範例：

'#input-id''fileimageresized'function(event, previewId, index) $().on(,{

console"fileimageresized"   .log();

});

fileimagesresized

當全部預覽的圖像文件因爲resizeImage或者maxImageWidth/maxImageHeight設置都發生調整時觸發這個事件。它只適用於圖像文件預覽且showPreview設置爲true的狀況。

範例：

'#input-id''fileimagesresized'function(event) $().on(,{

console"fileimagesresized"   .log();

});

filebrowse

單擊文件瀏覽按鈕以打開文件選擇對話框時觸發此事件。

範例：

'#input-id''filebrowse'function(event) $().on(,{

console"File browse triggered."   .log();

});

filebatchselected

在預覽中選擇並顯示一批文件後觸發此事件。附加參數有：

• files：文件對象實例（若是FileReader不可用，則爲空對象）。

範例：

'#input-id''filebatchselected'function(event, files) $().on(,{

console'File batch selected triggered'   .log();

});

fileselectnone

當用戶因爲重複選擇場景（即，在已經包含先前選擇的文件的文件輸入）而沒有選擇任何文件時，觸發此事件。此事件更適用於Google Chrome等瀏覽器，當文件選擇對話框被取消時，它清除文件輸入。對於其餘瀏覽器，此事件一般僅在復位表單或清除文件輸入（使用刪除按鈕）時纔會觸發。

範例：

'#input-id''fileselectnone'function(event) $().on(,{

console"Huh! No files were selected."   .log();

});

filelock

當經過點擊上傳按鈕啓動上傳過程時觸發此事件，而且整個小部件被鎖定（禁用），直到上傳被處理。當文件輸入被鎖定時，只有取消按鈕被啓用。附加參數有：

• filestack：已選擇的文件對象數組。
• uploadExtraData：這個插件的uploadExtraData設置（若是沒設置，則返回空對象）。

'#input-id''filelock'function(event, filestack, extraData) ·          $().on(,{

varfunction(n)returnundefined·              fstack = filestack.filter({n !=});

console'Files selected - '·              .log(+ fstack.length);

·          });

fileunlock

當上傳過程完成（成功或有錯誤）時觸發此事件。整個小部件被解鎖（啓用）並恢復到初始狀態。附加參數有：

• filestack：已選擇的文件對象數組。
• uploadExtraData：這個插件的uploadExtraData設置（若是沒設置，則返回空對象）。

'#input-id''fileunlock'function(event, filestack, extraData) ·        $().on(,{

varfunction(n)returnundefined·          fstack = filestack.filter({n !=});

console'Files selected - '·          .log(+ fstack.length);

·        });

filepredelete

在刪除initialPreview內容集中的每一個縮略圖文件以前觸發此事件。附加參數有：

• key：要刪除的已選文件在initialPreviewConfig中傳入的關鍵字。
• jqXHR：用於此事務的jQuery XMLHttpRequest對象（若是可用）。
• data：輸出deleteExtraData對象。

'#input-id''filepredelete'function(event, key) $().on(,{

console'Key = '   .log(+ key);

});

filedeleted

在刪除initialPreview內容集中的每一個縮略圖文件以後觸發此事件。附加參數有：

• key：要刪除的已選文件在initialPreviewConfig中傳入的關鍵字。
• jqXHR：用於此事務的jQuery XMLHttpRequest對象（若是可用）。
• data：輸出deleteExtraData對象。

'#input-id''filedeleted'function(event, key)         $().on(,{

console'Key = '          .log(+ key);

        });

filepreajax

此事件在提交ajax請求上傳以前觸發。你能夠在ajax提交以前使用此事件操縱uploadExtraData。只有經過每一個縮略圖上傳按鈕觸發上傳時，纔可使用如下附加參數：

• previewId：預覽窗口中每一個文件的縮略圖div父節點的id。
• index：預覽列表中加載的文件的基於0的順序索引

'#input-id''filepreajax'function(event, previewId, index)        $().on(,{

console'File pre ajax triggered'         .log();

       });

filepreupload

此事件僅在ajax上傳且上載每一個縮略圖文件以前觸發。此事件在filepreajax以後伴隨ajax的beforeSend事件觸發。附加參數有：

• data：這是一個數據對象（關聯數組），它發送如下信息，其關鍵字是：
• form：FormData，經過XHR2傳遞的對象（若是不可用，則爲空對象）。
• files: 數組，文件棧數組（若是不可用，則爲空對象）。
• filenames：數組，堆棧數組中每一個文件的客戶端文件名（若是不可用，則爲空對象）。
• filescount: int，所選文件的計數包括已經上傳的文件（基本上返回getFilesCount方法的輸出）。
• extra：該插件的uploadExtraData設置（若是不可用，則爲空對象）。
• response：經過ajax響應發送的數據（若是不可用，則爲空對象）。
• reader：FileReader實例，若是可用。
• jqXHR：用於此事務的jQuery XMLHttpRequest對象（若是可用）。
• previewId：預覽窗口中每一個文件的縮略圖div父節點的id。
• index：預覽列表中加載的文件的基於0的順序索引

'#input-id''filepreupload'function(event, data, previewId, index)         $().on(,{

var         form = data.form, files = data.files, extra = data.extra,

              response = data.response, reader = data.reader;

console'File pre upload triggered'          .log();

        });

fileuploaded

此事件僅在ajax上傳且上載每一個縮略圖文件以後觸發。此事件只有是AJAX上傳並在如下場景纔會觸發：

• 當單擊每一個預覽縮略圖中的上傳圖標而且文件上傳成功時，或者
• 當你將uploadAsync設置爲true而且已觸發批量上傳時。在這種狀況下，fileuploaded事件在每一個單獨的選定文件成功上傳以後被觸發。

此事件可用的其餘參數：

• data：這是一個數據對象（關聯數組），它發送如下信息，其關鍵字是：
• form：FormData，經過XHR2傳遞的對象（若是不可用，則爲空對象）。
• files: 數組，文件棧數組（若是不可用，則爲空對象）。
• filenames：數組，堆棧數組中每一個文件的客戶端文件名（若是不可用，則爲空對象）。
• filescount: int，所選文件的計數包括已經上傳的文件（基本上返回getFilesCount方法的輸出）。
• extra：該插件的uploadExtraData設置（若是不可用，則爲空對象）。
• response：經過ajax響應發送的數據（若是不可用，則爲空對象）。
• reader：FileReader實例，若是可用。
• jqXHR：用於此事務的jQuery XMLHttpRequest對象（若是可用）。
• previewId：預覽窗口中每一個文件的縮略圖div父節點的id。
• index：預覽列表中加載的文件的基於0的順序索引

'#input-id''fileuploaded'function(event, data, previewId, index)         $().on(,{

var          form = data.form, files = data.files, extra = data.extra,

              response = data.response, reader = data.reader;

console'File uploaded triggered'          .log();

        });

filebatchpreupload

此事件僅對於ajax上傳的上傳按鈕被單擊以後且批量上傳開始以前纔會觸發（同步和異步上傳）。附加參數有：

• data：這是一個數據對象（關聯數組），它發送如下信息，其關鍵字是：
• form：FormData，經過XHR2傳遞的對象（若是不可用，則爲空對象）。
• files: 數組，文件棧數組（若是不可用，則爲空對象）。
• filenames：數組，堆棧數組中每一個文件的客戶端文件名（若是不可用，則爲空對象）。
• filescount: int，所選文件的計數包括已經上傳的文件（基本上返回getFilesCount方法的輸出）。
• extra：該插件的uploadExtraData設置（若是不可用，則爲空對象）。
• response：經過ajax響應發送的數據（若是不可用，則爲空對象）。
• reader：FileReader實例，若是可用。
• jqXHR：用於此事務的jQuery XMLHttpRequest對象（若是可用）。

'#input-id''filebatchpreupload'function(event, data, previewId, index) $().on(,{

var   form = data.form, files = data.files, extra = data.extra,

        response = data.response, reader = data.reader;

console'File batch pre upload'   .log();

});

filebatchuploadsuccess

此事件僅在ajax上傳且文件批量上傳成功以後觸發。此事件只有是AJAX上傳並在如下場景纔會觸發：

1. 當你將uploadAsync設置爲false而且已經觸發了批量上傳時。 在這種狀況下，在因此文件成功上傳後會觸發filebatchuploadsuccess事件 。

附加參數有：

• data：這是一個數據對象（關聯數組），它發送如下信息，其關鍵字是：
• form：FormData，經過XHR2傳遞的對象（若是不可用，則爲空對象）。
• files： 數組，文件棧數組（若是不可用，則爲空對象）。
• filenames：數組，堆棧數組中每一個文件的客戶端文件名（若是不可用，則爲空對象）。
• filescount：int，所選文件的計數包括已經上傳的文件（基本上返回getFilesCount方法的輸出）。
• extra：該插件的uploadExtraData設置（若是不可用，則爲空對象）。
• response：經過ajax響應發送的數據（若是不可用，則爲空對象）。
• reader：FileReader實例，若是可用。
• jqXHR：用於此事務的jQuery XMLHttpRequest對象（若是可用）。

'#input-id''filebatchuploadsuccess'function(event, data, previewId, index) $().on(,{

var   form = data.form, files = data.files, extra = data.extra,

        response = data.response, reader = data.reader;

console'File batch upload success'   .log();

});

filebatchuploadcomplete

此事件僅對於ajax上傳且完成同步或異步ajax批量上傳後觸發。附加參數有：

• files：數組，文件棧數組（若是不可用，則爲空對象）。
• extra：該插件的uploadExtraData設置（若是不可用，則爲空對象）。

'#input-id''filebatchuploadcomplete'function(event, files, extra)         $().on(,{

console'File batch upload complete'         .log();

        });

filesuccessremove

使用縮略圖刪除按鈕刪除成功上傳的縮略圖後，會觸發此事件。當showUploadedThumbs設置爲true時，這一般是適用的。附加參數有：

• id：縮略圖HTML容器節點的id屬性。

'#input-id''filesuccessremove'function(event, id)         $().on(,{

if          (some_processing_function(id)) {

console'Uploaded thumbnail successfully removed'            .log();

else          }{

returnfalse// 縮略圖刪除中斷              ;

          }

        });

filedisabled

當使用disable方法禁用文件輸入小部件（防止任何修改）時觸發此事件。

'#input-id''filedisabled'function(event) $().on(,{

console'File disabled' .log();

});

fileenabled

當使用·enable·方法啓用文件輸入小部件（容許修改）時觸發此事件。

'#input-id''fileenabled'function(event) $().on(,{

console'File enabled' .log();

});

filesorted

當經過初始預覽中的拖放來對文件進行排序/從新排列時，會觸發此事件。如下參數將做爲JSON對象關鍵字另外發送：

• previewId：預覽縮略圖HTML容器節點的id屬性。
• oldIndex：initialPreview中縮略圖得舊索引
• newIndex：initialPreview中縮略圖得新索引
• stack：排序後修改的initialPreviewConfig

'#input-id''filesorted'function(event, params)         $().on(,{

console'File sorted '          .log(, params.previewId, params.oldIndex, params.newIndex, params.stack);

        });

filezoomshow

單擊縮放按鈕（在模態對話框中顯示內容詳細預覽）時觸發此事件。如下參數將做爲JSON對象關鍵字另外發送：

• sourceEvent：事件，模態對話框源事件show.bs.modal。
• previewId：字符串，預覽縮略圖HTML容器節點的id屬性。
• modal：jQuery對象，模態框對象

'#input-id''filezoomshow'function(event, params) $().on(,{

console'File zoom show '   .log(, params.sourceEvent, params.previewId, params.modal);

});

filezoomshown

在模態框已被用戶看到以後觸發此事件（將等待CSS轉換完成）​​。如下參數將做爲JSON對象關鍵字另外發送：

• sourceEvent：事件，模態對話框源事件show.bs.modal。
• previewId：字符串，預覽縮略圖HTML容器節點的id屬性。
• modal：jQuery對象，模態框對象

'#input-id''filezoomshown'function(event, params) $().on(,{

console'File zoom shown '   .log(, params.sourceEvent, params.previewId, params.modal);

});

filezoomhide

經過關閉對話框按鈕隱藏模態框後觸發此事件。如下參數將做爲JSON對象關鍵字另外發送：

• sourceEvent：事件，模態對話框源事件show.bs.modal。
• previewId：字符串，預覽縮略圖HTML容器節點的id屬性。
• modal：jQuery對象，模態框對象

$('#input-id').on('filezoomhide', function(event, params) { console.log('File zoom hide ', params.sourceEvent, params.previewId, params.modal); });

filezoomhidden

在模態從用戶眼中隱藏完成以後觸發此事件（將等待CSS轉換完成）​​。如下參數將做爲JSON對象關鍵字另外發送：

• sourceEvent：事件，模態對話框源事件show.bs.modal。
• previewId：字符串，預覽縮略圖HTML容器節點的id屬性。
• modal：jQuery對象，模態框對象

'#input-id''filezoomhidden'function(event, params) $().on(,{

console'File zoom hidden '   .log(, params.sourceEvent, params.previewId, params.modal);

});

filezoomloaded

在使用remote選項加載模態框內容以後觸發此事件。如下參數將做爲JSON對象關鍵字另外發送：

• sourceEvent：事件，模態對話框源事件show.bs.modal。
• previewId：字符串，預覽縮略圖HTML容器節點的id屬性。
• modal：jQuery對象，模態框對象

'#input-id''filezoomloaded'function(event, params)         $().on(,{

console'File zoom loaded '          .log(, params.sourceEvent, params.previewId, params.modal);

        });

filezoomprev

在縮放預覽模式下觸發此事件，當單擊查看上一個導航按鈕時（也是在縮放模式下按下鍵盤左箭頭時觸發）。

• previewId：字符串，預覽縮略圖HTML容器節點的id屬性。
• modal：jQuery對象，模態框對象

'#input-id''filezoomprev'function(event, params) $().on(,{

console'File zoom previous '   .log(, params.previewId, params.modal);

});

filezoomnext

在縮放預覽模式下觸發此事件，當查看下一個導航按鈕被點擊時（當在縮放模式下按下鍵盤右箭頭時也會觸發此事件）。

• previewId：字符串，預覽縮略圖HTML容器節點的id屬性。
• modal：jQuery對象，模態框對象

'#input-id''filezoomnext'function(event, params) $().on(,{

console'File zoom next '   .log(, params.previewId, params.modal);

});

異常事件

用於文件驗證錯誤的事件。

fileerror

當上傳文件客戶端驗證錯誤時，會觸發此事件。它容許傳入對象data做爲參數。

• data：包含下面關鍵字的對象/關聯數組。
• id：預覽縮略圖標識符id（若是不可用，則爲undefined）
• index：文件索引或者預覽縮略圖索引（若是不可用，則爲undefined）
• file：文件對象（若是不可用，則爲undefined）
• reader：文件讀取器實例（若是不可用，則爲undefined）
• files：文件堆數組（若是不可用，則爲undefined）
• msg：字符串，生成的錯誤信息

範例：

'#input-id''fileerror'function(event, data, msg) $().on(,{

console  .log(data.id);

console  .log(data.index);

console  .log(data.file);

console  .log(data.reader);

console  .log(data.files);

// 獲取信息   

   alert(msg);

});

fileimageresizeerror

當調整圖像大小遇到錯誤或異常時，會觸發此事件（請參見resizeImage屬性）。附加參數有：

• data：包含下面關鍵字的對象/關聯數組。
• id：預覽縮略圖標識符id（若是不可用，則爲undefined）
• index：文件索引或者預覽縮略圖索引（若是不可用，則爲undefined）
• msg：字符串，生成的錯誤信息

範例：

'#input-id''fileimageresizeerror'function(event, data, msg) $().on(,{

console  .log(data.id);

console  .log(data.index);

// get message  

   alert(msg);

});

fileuploaderror

此事件僅在ajax上傳時觸發，而且主要針對ajax上傳時遇到上載或文件輸入驗證錯誤。此事件僅針對ajax上傳並在如下狀況下觸發：

1. 當每一個預覽縮略圖中的上傳圖標被點擊而且文件面臨上傳中的驗證錯誤時，或者
2. 當你將uploadAsync設置爲true而且已觸發批量上傳時。在這種狀況下，在任何所選文件面臨上傳驗證錯誤後，會觸發fileuploaderror事件。

此事件可用的附加參數有：

• data：這是一個數據對象（關聯數組），它發送如下信息，其關鍵字是：
• id：預覽縮略圖的標識符（若是不可用，則爲空對象）。
• index：文件索引或者預覽縮略圖索引（若是不可用，則爲空對象）。
• form：FormData，經過XHR2傳遞的對象（若是不可用，則爲空對象）。
• files： 數組，文件棧數組（若是不可用，則爲空對象）。
• filenames：數組，堆棧數組中每一個文件的客戶端文件名（若是不可用，則爲空對象）。
• filescount：int，所選文件的計數包括已經上傳的文件（基本上返回getFilesCount方法的輸出）。
• extra：該插件的uploadExtraData設置（若是不可用，則爲空對象）。
• response：經過ajax響應發送的數據（若是不可用，則爲空對象）。
• reader：FileReader實例，若是可用。
• jqXHR：用於此事務的jQuery XMLHttpRequest對象（若是可用）。
• msg：字符串，生成的錯誤信息。

'#input-id''fileuploaderror'function(event, data, msg)         $().on(,{

var          form = data.form, files = data.files, extra = data.extra,

              response = data.response, reader = data.reader;

console'File upload error'          .log();

// 獲取信息         

         alert(msg);

        });

filebatchuploaderror

此事件僅在ajax上傳時觸發，而且同步批量上傳面臨上傳驗證錯誤以後。此事件僅針對ajax上傳並在如下狀況下觸發：

• 當您將uploadAsync設置爲false而且已觸發批量上傳時。在這種狀況下，在任何文件面臨上載錯誤或者你經過服務器操做JSON響應返回錯誤後觸發filebatchuploaderror事件。

此事件可用的附加參數有：

• data：這是一個數據對象（關聯數組），它發送如下信息，其關鍵字是：
• form：FormData，經過XHR2傳遞的對象（若是不可用，則爲空對象）。
• files： 數組，文件棧數組（若是不可用，則爲空對象）。
• filenames：數組，堆棧數組中每一個文件的客戶端文件名（若是不可用，則爲空對象）。
• filescount：int，所選文件的計數包括已經上傳的文件（基本上返回getFilesCount方法的輸出）。
• extra：該插件的uploadExtraData設置（若是不可用，則爲空對象）。
• response：經過ajax響應發送的數據（若是不可用，則爲空對象）。
• reader：FileReader實例，若是可用。
• jqXHR：用於此事務的jQuery XMLHttpRequest對象（若是可用）。
• msg：字符串，生成的錯誤信息。

'#input-id''filebatchuploaderror'function(event, data, msg)         $().on(,{

var          form = data.form, files = data.files, extra = data.extra,

              response = data.response, reader = data.reader;

console'File batch upload error'          .log();

// 獲取信息         

         alert(msg);

        });

filedeleteerror

當在initialPreview內容集中刪除每一個縮略圖文件出現錯誤時觸發此事件。附加參數有：

• data：這是一個數據對象（關聯數組），它發送如下信息，其關鍵字是：
• id：預覽縮略圖的標識符（若是不可用，則爲空對象）。
• index：文件索引或者預覽縮略圖索引（若是不可用，則爲空對象）。
• extra：該插件的uploadExtraData設置（若是不可用，則爲空對象）。
• response：經過ajax響應發送的數據（若是不可用，則爲空對象）。
• jqXHR：用於此事務的jQuery XMLHttpRequest對象（若是可用）。
• msg：字符串，生成的錯誤信息。

'#input-id''filedeleteerror'function(event, data, msg) ·        $().on(,{

console'File delete error'·          .log();

// get message·         

·         alert(msg);

·        });

filefoldererror

當文件夾或多個文件夾被拖放到文件預覽放置區時，會觸發此事件。附加參數有：

• folders：整數，拖拽的文件夾數量。
• msg：字符串，生成的錯誤信息。

'#input-id''filefoldererror'function(event, folders, msg)         $().on(,{

console'File folder dropped error'          .log();

// 獲取信息         

         alert(msg);

        });

filecustomerror

經過從源事件返回錯誤異常對象，用戶從其餘事件之一手動觸發此事件。參考事件操做部分瞭解詳情。附加參數有：

• data：這是一個數據對象（關聯數組），它發送如下信息，其關鍵字是：
• form：FormData，經過XHR2傳遞的對象（若是不可用，則爲空對象）。
• files： 數組，文件棧數組（若是不可用，則爲空對象）。
• filenames：數組，堆棧數組中每一個文件的客戶端文件名（若是不可用，則爲空對象）。
• filescount：int，所選文件的計數包括已經上傳的文件（基本上返回getFilesCount方法的輸出）。
• extra：該插件的uploadExtraData設置（若是不可用，則爲空對象）。
• response：經過ajax響應發送的數據（若是不可用，則爲空對象）。
• reader：FileReader實例，若是可用。
• jqXHR：用於此事務的jQuery XMLHttpRequest對象（若是可用）。
• msg：字符串，生成的錯誤信息。

"#input"'filecustomerror'function(event, params, msg)         $().on(,{

console         .log(params.id);

console         .log(params.index);

console         .log(params.data);

// 獲取信息         

         alert(msg);

        });

事件處理

從版本v4.1.8開始，你能夠操做事件並經過其餘事件添加自定義驗證，經過返回大多數事件的數據並將其用於高級處理。除了如下事件以外，事件部分中列出的大多數事件都支持此功能。

• fileclear
• filecleared
• filereset
• fileerror
• fileuploaderror
• filebatchuploaderror
• filedeleteerror
• filefoldererror
• filecustomerror
• fileuploaded
• filebatchuploadcomplete
• filebatchuploadsuccess

對於除上述以外的全部事件，你能夠設置自定義驗證錯誤，這將在啓動上傳以前觸發。

這將使你可以添加其餘自定義驗證來加強文件輸入控件適用於更多場景。它容許使用任何fileinput事件（除上述事件以外）返回關聯對象，例如，change、fileselect、filepreupload、filebatchpreupload等等。

該對象能夠返回如下關鍵字：

• message：字符串，在上傳以前顯示是的驗證錯誤消息。若是設置了它，插件會在調用時自動停止上傳，並將其顯示爲錯誤消息。你可使用此屬性來讀取文件並執行本身的自定義驗證。
• data：對象，一個停止時可選的額外數據關聯數組，你能夠給它傳值，稍後使用它。

範例：

• 步驟1： 你能夠觸發一個從filepreupload停止的異常。

'#input''filepreupload'function(event, data, previewId, index, jqXHR)           $().on(,{

// 進行自定義驗證並返回以下所示的錯誤              

if             (customValidationFailed) {

return                 {

'You are not allowed to do that'                     message:,

'Key 1''Detail 1'                     data: {key1:, detail1:}

                 };

             }

          });

上傳中斷將在AJAX上傳或表單提交（非AJAX上傳）時觸發。

• 步驟2：經過捕獲filecustomerror停止事件來讀取額外的數據。

'#input''filecustomerror'function(event, params)         $().on(,{

// `params.abortData`包含額外傳出的數據         

// `params.abortMessage`包含傳出的錯誤中斷信息         

        });

如前所述，在如下事件中不支持使用filecustomerror的上述功能：

• fileclear
• filecleared
• filereset
• fileerror
• fileuploaderror
• filebatchuploaderror
• filedeleteerror
• filecustomerror
• fileuploaded
• filebatchuploadcomplete
• ·         filebatchuploadsuccess

樣例代碼

AJAX上傳實例

具備拖拽功能，基於AJAX 異步/同步的上傳。只須要設置uploadurl數據屬性，把multiple屬性設置爲true。請注意，多個上傳的文件輸入name屬性應設置爲數組格式。你能夠修改上傳以前選擇的文件，例如增長或刪除。對於下面的示例，你能夠在服務器上讀取上傳的name屬性爲kartik-input-700文件。

例1
<input id="input-700" name="kartik-input-700[]" type="file" multiple class="file-loading">

<script>

$("#input-700").fileinput({

uploadUrl: "http://localhost/file-upload-single/1", // 服務器端上傳處理程序

uploadAsync: true, //異步上傳

maxFileCount: 5 //最大上傳文件數爲5

});

</script>

例2
<input id="input-701" name="kartik-input-701[]" type="file" multiple=true class="file-loading">

<script>

$("#input-701").fileinput({

uploadUrl: "http://localhost/file-upload-batch/1", // 服務器端上傳處理程序

uploadAsync: true,

maxFileCount: 5

});

</script>

例3
<input id="input-702" name="kartik-input-702[]" type="file" multiple=true class="file-loading">
<script>
$("#input-702").fileinput({
uploadUrl: "http://localhost/file-upload-single/1", // 服務器端上傳處理程序
uploadAsync: true, //異步上傳
minFileCount: 1, //最小上傳文件數： 1
maxFileCount: 5, //最大上傳文件數： 5
overwriteInitial: false, //不能重載初始預覽
initialPreview: [ //初始預覽數據
"http://lorempixel.com/800/460/people/1",
"http://lorempixel.com/800/460/people/2"
],
initialPreviewAsData: true, // 肯定傳入預覽數據，而不是原生標記語言
initialPreviewFileType: 'image', // 默認爲`image`，能夠在下面配置中被覆蓋
initialPreviewConfig: [ //初始預覽配置
{caption: "People-1.jpg", size: 576237, width: "120px", url: "/site/file-delete", key: 1},
{caption: "People-2.jpg", size: 932882, width: "120px", url: "/site/file-delete", key: 2},
],
uploadExtraData: { //上傳額外數據
img_key: "1000",
img_keywords: "happy, places",
}
});
</script>
例4
PHP的寫法以下：
<input id="input-703" name="kartik-input-703[]" type="file" multiple class="file-loading">
<script>
$("#input-703").fileinput({
uploadUrl: "http://localhost/file-upload-single/2",
uploadAsync: true, //異步上傳
minFileCount: 1,
maxFileCount: 5,
uploadExtraData: function(previewId, index) {
return {key: index};
},
overwriteInitial: false,
initialPreviewAsData: true // 肯定你是僅發送預覽數據，而不是標記
});
</script>
<?php
// ...
// 處理ajax上傳並返回JSON響應的服務器代碼。
// 你的服務器方法必須返回一個包含`initialPreview`、`initialPreviewConfig`和`append`的JSON對象。
// 一個PHP服務器代碼示例以下：
// ...
$key = '<解析圖像關鍵字的代碼>';
$url = '<你刪除這個文件的服務器方法URL>';
echo json_encode([
'initialPreview' => [
"http://path.to.uploaded.file/{$key}.jpg"
],
'initialPreviewConfig' => [
['caption' => "Sports-{$key}.jpg", 'size' => 627392, 'width' => '120px', 'url' => $url, 'key' => $key],
],
'append' => true // 是否把這些配置加入`initialPreview`。
// 若是設置爲`false`，它會重載初始預覽。
// 若是設置爲`true`，它會加入初始預覽之中。
// 若是這個屬性沒有被設置或者沒有傳出，它會默認爲`true`。
]);
?>

例5

<input id="input-704" name="kartik-input-704[]" type="file" multiple=true class="file-loading">
<script>
$("#input-704").fileinput({
uploadUrl: "http://localhost/file-upload-batch/2", // 服務器上傳接收方法
uploadAsync: false, //同步上傳
minFileCount: 1,
maxFileCount: 5,
initialPreviewAsData: true
});
</script>
<?php
// ...
// 處理ajax上傳並返回JSON響應的服務器代碼。
// 你的服務器方法必須返回一個包含`initialPreview`、`initialPreviewConfig`和`append`的JSON對象。
// 一個PHP服務器代碼示例以下：
// ...
$p1 = $p2 = [];
if (empty($_FILES['kartik-input-704']['name'])) {
echo '{}';
return;
}
for ($i = 0; $i < count($_FILES['kartik-input-704']['name']); $i++) {
$j = $i + 1;
$key = '<獲取圖像關鍵字的代碼>';
$url = '<你的服務器上刪除這個圖像的服務地址>';
$p1[$i] = "http://path.to.uploaded.file/{$key}.jpg"; // 發送的數據
$p2[$i] = ['caption' => "Animal-{$j}.jpg", 'size' => 732762, 'width' => '120px', 'url' => $url, 'key' => $key];
}
echo json_encode([
'initialPreview' => $p1,
'initialPreviewConfig' => $p2,
'append' => true // 是否把這些配置加入`initialPreview`。
// 若是設置爲`false`，它會重載初始預覽。
// 若是設置爲`true`，它會加入初始預覽之中。
// 若是這個屬性沒有被設置或者沒有傳出，它會默認爲`true`。
]);
?>

例6

<input id="input-705" name="kartik-input-705[]" type="file" multiple class="file-loading">
<script>
var $input = $("#input-705");
$input.fileinput({
uploadUrl: "http://localhost/file-upload-batch/2", // 服務器接收上傳文件的方法
uploadAsync: false,
showUpload: false, // 隱藏上傳按鈕
showRemove: false, // 隱藏移除按鈕
minFileCount: 1,
maxFileCount: 5
}).on("filebatchselected", function(event, files) {
// 選擇文件後當即觸發上傳方法
$input.fileinput("upload");
});
</script>
例7
<input id="input-706" name="kartik-input-706[]" type="file" multiple=true class="file-loading">
<style>
.krajee-default .file-thumb-progress {
top: 55px
}
</style> <!-- 樣式重載 -->
<script>
var $el2 = $("#input-706");

// 這個場景的自定義頁腳模板
// 自定義標籤在大括號裏

var footerTemplate = '<div class="file-thumbnail-footer" style ="height:94px">\n' +
' <div style="margin:5px 0">\n' +
' <input class="kv-input kv-new form-control input-sm text-center {TAG_CSS_NEW}" value="{caption}" placeholder="Enter caption...">\n' +
' <input class="kv-input kv-init form-control input-sm text-center {TAG_CSS_INIT}" value="{TAG_VALUE}" placeholder="Enter caption...">\n' +
' </div>\n' +
' {size} {progress} {actions}\n' +
'</div>';

$el2.fileinput({
uploadUrl: '/file-upload-batch/2',
uploadAsync: false,
maxFileCount: 5,
overwriteInitial: false,
layoutTemplates: {footer: footerTemplate, size: '<samp><small>({sizeText})</small></samp>'},
previewThumbTags: {
'{TAG_VALUE}': '', // 無值
'{TAG_CSS_NEW}': '', // 新的縮略圖輸入
'{TAG_CSS_INIT}': 'hide' // 隱藏初始輸入
},
initialPreview: [
"<img style='height:160px' src='http://angelasp.com/800/460/city/1'>",
"<img style='height:160px' src='http://angelasp.com/800/460/city/2'>",
],
initialPreviewConfig: [
{caption: "City-1.jpg", size: 327892, width: "120px", url: "/site/file-delete", key: 1},
{caption: "City-2.jpg", size: 438828, width: "120px", url: "/site/file-delete", key: 2},
],
initialPreviewThumbTags: [
{'{TAG_VALUE}': 'City-1.jpg', '{TAG_CSS_NEW}': 'hide', '{TAG_CSS_INIT}': ''},
{
'{TAG_VALUE}': function() { // 回調示例
return 'City-2.jpg';
},
'{TAG_CSS_NEW}': 'hide',
'{TAG_CSS_INIT}': ''
}
],
uploadExtraData: function() { // 回調示例
var out = {}, key, i = 0;
$('.kv-input:visible').each(function() {
$el = $(this);
key = $el.hasClass('kv-new') ? 'new_' + i : 'init_' + i;
out[key] = $el.val();
i++;
});
return out;
}
});
</script>
例8
<input id="input-707" name="kartik-input-707[]" type="file" multiple=true class="file-loading">
<script>
$("#input-707").fileinput({
uploadUrl: "/file-upload-batch/1",
uploadAsync: false,
minFileCount: 2,
maxFileCount: 5,
overwriteInitial: false,
initialPreview: [
"<img style='height:160px' src='http://angelasp.com/800/460/nature/1'>",
"<img style='height:160px' src='http://angelasp.com/800/460/nature/2'>",
"<img style='height:160px' src='http://angelasp.com/800/460/nature/3'>",
],
initialPreviewConfig: [
{caption: "Food-1.jpg", size: 329892, width: "120px", url: "/site/file-delete", key: 1},
{caption: "Food-2.jpg", size: 872378, width: "120px", url: "/site/file-delete", key: 2},
{caption: "Food-3.jpg", size: 632762, width: "120px", url: "/site/file-delete", key: 3},
],
uploadExtraData: {
img_key: "1000",
img_keywords: "happy, nature",
}
});
$("#input-707").on("filepredelete", function(jqXHR) {
var abort = true;
if (confirm("Are you sure you want to delete this image?")) {
abort = false;
}
return abort; // 你也能夠發送任何數據/對象，只要你能夠在`filecustomerror`事件接收。
});
<script>
例9
<input id="input-708" name="kartik-input-708[]" type="file" multiple=true class="file-loading">
<script>
$("#input-708").fileinput({
uploadUrl: "http://localhost/file-upload-batch/1", // 服務器接收上傳文件方法
uploadAsync: false,
maxFileCount: 5
}).on('filebatchpreupload', function(event, data) {
var n = data.files.length, files = n > 1 ? n + ' files' : 'one file';
if (!window.confirm("你肯定要上傳 " + files + "？")) {
return {
message: "上傳中斷！", // 上傳異常信息
data:{} // 要發送的任何其餘數據，能夠在`filecustomerror`中引用
};
}
});
</script>
例10
<input id="input-709" name="kartik-input-709[]" type="file" multiple class="file-loading">
<div id="kv-error-1" style="margin-top:10px;display:none"></div>
<div id="kv-success-1" class="alert alert-success fade in" style="margin-top:10px;display:none"></div>
<script>
$("#input-709").fileinput({
uploadUrl: "http://localhost/file-upload-single/1", // 服務器接收上傳文件方法
uploadAsync: true,
showPreview: false,
allowedFileExtensions: ['jpg', 'png', 'gif'],
maxFileCount: 5,
elErrorContainer: '#kv-error-1'
}).on('filebatchpreupload', function(event, data, id, index) {
$('#kv-success-1').html('<h4>上傳狀態</h4><ul></ul>').hide();
}).on('fileuploaded', function(event, data, id, index) {
var fname = data.files[index].name,
out = '<li>' + 'U上傳文件 # ' + (index + 1) + ' - ' +
fname + ' 成功' + '</li>';
$('#kv-success-1 ul').append(out);
$('#kv-success-1').fadeIn('slow');
});
</script>
例11
<input id="input-710" name="kartik-input-710[]" type="file" multiple class="file-loading">
<div id="kv-error-2" style="margin-top:10px;display:none"></div>
<script>
<div id="kv-success-2" class="alert alert-success fade in" style="margin-top:10px;display:none"></div>
$("#input-700").fileinput({
uploadUrl: "http://localhost/file-upload-batch/1", // 服務器接收上傳文件方法
uploadAsync: false,
showPreview: false,
allowedFileExtensions: ['jpg', 'png', 'gif'],
maxFileCount: 5,
elErrorContainer: '#kv-error-2'
}).on('filebatchpreupload', function(event, data, id, index) {
$('#kv-success-2').html('<h4>上傳狀態</h4><ul></ul>').hide();
}).on('filebatchuploadsuccess', function(event, data) {
var out = '';
$.each(data.files, function(key, file) {
var fname = file.name;
out = out + '<li>' + '上傳文件 # ' + (key + 1) + ' - ' + fname + ' 成功。' + '</li>';
});
$('#kv-success-2 ul').append(out);
$('#kv-success-2').fadeIn('slow');
});
</script>
例12<input id="input-711" name="kartik-input-711[]" type="file" multiple class="file-loading"><script> $("#input-711").fileinput({ uploadUrl: "http://localhost/file-upload-single/1", // 服務器接收上傳文件方法 uploadAsync: true, maxFileCount: 5, showBrowse: false, browseOnZoneClick: true });</script>