1.特性

• 該插件可以將簡(jiǎn)單的 <input type=file /> 轉(zhuǎn)換為高級(jí)的文件選取控件朗和。對(duì)于不支持 JQuery 和 Javascript 的瀏覽器簿晓，將會(huì)回滾到正常的 HTML <input type="file" />
• fileinput 由以下三部分組成，其中包含用于控制顯示的選項(xiàng)和模板
  • 文件標(biāo)題部分：顯示所選文件的簡(jiǎn)要信息
  • 文件操作按鈕部分: 用以瀏覽忆植、移除、上傳文件
  • 文件預(yù)覽部分: 在客戶端(瀏覽器)預(yù)覽選擇的文件（支持 圖片朝刊、文本、flash拾氓、視頻文件的預(yù)覽），其他文件類型會(huì)顯示為正常文件的縮略圖
• 當(dāng)設(shè)置 <input type="file" /> 的 class="file" 后房官，插件將自動(dòng)的將該 input 轉(zhuǎn)換為高級(jí)的文件選擇器续滋，設(shè)置在該 input 身上的選項(xiàng)，將會(huì)被轉(zhuǎn)換為 data 屬性
• 能夠選擇和預(yù)覽多個(gè)文件吃粒。使用 HTML5 file reader API讀取和預(yù)覽文件拒课。如果選擇了許多文件，則顯示正在加載到預(yù)覽區(qū)域的文件的進(jìn)度早像。
• 提供預(yù)定義的模板和CSS類，可以根據(jù)需要更改這些模板和類臀脏，以設(shè)置 fileinput 顯示的樣式冀自。
• 能夠配置插件以顯示帶有初始標(biāo)題的 圖像/文件的初始預(yù)覽（對(duì)于記錄更新方案更有用）。請(qǐng)參閱插件選項(xiàng)部分中的InitialPreview熬粗、InitialPreviewConfig和InitialCaption屬性以配置此項(xiàng)。
• 能夠?qū)?nèi)容縮放為詳情預(yù)覽驻呐。在預(yù)覽中查看縮放內(nèi)容的幻燈片，最大化為無邊框或全屏預(yù)覽猜拾。
• 能夠通過拖放對(duì)初始預(yù)覽中的內(nèi)容進(jìn)行排序/重新排列佣盒。
• 能夠?qū)Σ寮O(shè)置主題，并控制樣式和布局。
• 在同一頁面支持多語言
• 顯示宋雏、隱藏以下任意或全部的選項(xiàng)
  • 標(biāo)題區(qū)
  • 預(yù)覽區(qū)
  • 上傳按鈕
  • 移除按鈕
• 自定義目標(biāo)容器元素的位置，以顯示整個(gè)插件嗦明、標(biāo)題容器蚪燕、標(biāo)題文本、預(yù)覽容器馆纳、預(yù)覽圖像和預(yù)覽狀態(tài)。
• 對(duì)于文本文件預(yù)覽鉴裹，將文本自動(dòng)換行到縮略圖寬度，并顯示換行指示器鏈接以在懸停時(shí)顯示完整文本径荔。您可以自定義換行指示器（默認(rèn)為…）脆霎。
• 可自定義預(yù)覽、進(jìn)度睛蛛、選擇的文件的信息
• 在表單提交的時(shí)候，自動(dòng)觸發(fā)文件上傳荸频。支持用于自定義基于 Ajax 的上傳的上傳路由/服務(wù)器操作參數(shù)客冈。
• 觸發(fā) JQuery 事件以進(jìn)行高級(jí)開發(fā)旭从。當(dāng)前可用的事件有 filereset郊酒、fileclear、filecleared摹闽、fileloaded 和 fileerror褐健。
• 支持 readonly 和 disabled 的 input
• 文件名太長(zhǎng)超過容器寬度時(shí)澜汤，動(dòng)態(tài)設(shè)置標(biāo)題欄的尺寸
• 在預(yù)覽容器中完全加載圖像后引發(fā)新的 fileimageuploaded 事件。
• 當(dāng)預(yù)覽圖超過預(yù)覽容器尺寸的時(shí)候俊抵，自動(dòng)縮放預(yù)覽圖
• 完全模板化和可擴(kuò)展坐梯，允許按照開發(fā)人員的需求配置 fileinput。
• 基于各種文件預(yù)覽類型的智能預(yù)覽吵血。內(nèi)置文件支持類型有 圖像、文本钱贯、HTML、視頻秩命、音頻褒傅、Flash、對(duì)象 和 其他樊卓。
• allowedPreviewTypes: 通過配置 allowedPreviewTypes 選項(xiàng)杠河，來設(shè)置哪些文件類型可被預(yù)覽，默認(rèn)為 ['image', 'html', 'text', 'video', 'audio', 'flash', 'object'],因此唾戚，默認(rèn)情況下待诅，所有文件類型都被視為要預(yù)覽的對(duì)象。例如卑雁，如果僅僅需要預(yù)覽 image 和 video 文件，可做如下設(shè)置：{allowedPreviewTypes: ['image', 'video']}; , 禁止所有文件類型的預(yù)覽莹捡，將預(yù)覽區(qū)域設(shè)置為一個(gè) icon 而不是一個(gè)縮略圖，可設(shè)置 previewIcon 選項(xiàng)篮赢，如： {previewIcon: null}, 可將該選項(xiàng)設(shè)置為 null, '', false;
• allowedPreviewMimeTypes: 除了 allowedPreviewTypes 外，還可以控制可以顯示哪些 MIME 類型文件可進(jìn)行預(yù)覽启泣。該值默認(rèn)為 null, 即所有 MIME 類型文件均可預(yù)覽. 注：使用2.5.0版，您現(xiàn)在可以通過設(shè)置 allowedFileTypes 和 allowedFileExtensions 來控制允許上傳的文件類型或擴(kuò)展名遣蚀。
• layoutTemplates: 允許您在一個(gè)屬性中配置所有布局模板設(shè)置纱耻。可以配置的布局對(duì)象有：main1膝迎、main2、preview芒涡、caption 和 modal卖漫。
• previewTemplates: 針對(duì)每個(gè)預(yù)覽類型的所有預(yù)覽模板都被合并進(jìn)一個(gè)屬性，鍵是在 allowedPreviewTypes 中設(shè)置的格式羊始，值是用于預(yù)覽的模板。每個(gè)預(yù)覽文件類型（常規(guī)突委、圖像、文本缘缚、HTML敌蚜、視頻、音頻弛车、Flash、對(duì)象和其他）都有默認(rèn)的預(yù)構(gòu)建模板纷跛。通用模板僅用于使用直接標(biāo)記顯示 initialPreview 內(nèi)容。
• previewSettings：允許您為每個(gè)預(yù)覽圖像類型配置寬度和高度双妨。插件為每種預(yù)定義類型設(shè)有默認(rèn)寬度和高度，即圖像刁品、文本、HTML状您、視頻兜挨、音頻、Flash和對(duì)象拌汇。
• fileTypeSettings: 允許通過回調(diào)函數(shù)來配置和標(biāo)識(shí)每個(gè)預(yù)覽文件類型，該插件有默認(rèn)的預(yù)定義回調(diào)函數(shù)來標(biāo)識(shí)每種文件類型魁淳。即圖像与倡、文本、HTML纺座、視頻、音頻少欺、Flash和對(duì)象别惦。
• 在模板中替換標(biāo)簽已經(jīng)得到了增強(qiáng)夫椭。使用此版本，它將自動(dòng)檢查模板字符串中要替換的每個(gè)標(biāo)記是否多次出現(xiàn)蹭秋。
• 通過返回輸出以中止任何其他事件中的上傳，可以輕松地操作事件并添加自定義驗(yàn)證消息羽莺。

注意：
Flash預(yù)覽需要安裝Shockwave Flash并由客戶端瀏覽器支持洞豁。Flash預(yù)覽當(dāng)前僅在WebKit瀏覽器中成功工作荒给。然而刁卜，所有支持HTML5視頻/音頻標(biāo)簽的現(xiàn)代瀏覽器都支持視頻和音頻格式。請(qǐng)注意蛔趴，HTML5視頻元素（例如MP4、WebM鱼蝉、OGG箫荡、MP3、WAV）支持的視頻/音頻格式數(shù)量有限羔挡。建議視頻文件的大小要小（通過maxfilesize屬性控制）睬魂，這樣就不會(huì)影響預(yù)覽性能镀赌。您可以從這個(gè)插件repo的examples目錄復(fù)制一些文件氯哮，以測(cè)試一些flash和video文件的示例喉钢。

2. 文件上傳特性

在4.0.0版本中良姆，該插件包含對(duì)Ajax上傳的內(nèi)置支持，以及選擇性地添加或刪除文件玛追。Ajax上傳功能基于HTML5 FormData 和 XMLHttpRequest 2 標(biāo)準(zhǔn)構(gòu)建。大多數(shù)現(xiàn)代瀏覽器都支持這個(gè)標(biāo)準(zhǔn)韩玩，但是對(duì)于不支持的瀏覽器陆馁，插件將自動(dòng)降級(jí)為基于表單的正常提交。

• 使用 HTML5 的 FormData 添加基于 Ajax 的上傳功能（大多數(shù)現(xiàn)代瀏覽器都支持）击狮。如果不支持，將降級(jí)為基于表單的正常文件提交彪蓬。
• 為了使用 Ajax 文件上傳，必須設(shè)置 uploadUrl 屬性
• 增強(qiáng)插件現(xiàn)在允許添加储狭、追加捣郊、刪除文件（基于許多人的反饋）。這樣就可以追加文件進(jìn)行預(yù)覽呛牲。
• 新的 DRAG & DROP 區(qū)域可以通過拖拽來添加和追加文件
• 可逐個(gè)或批量刪除、上傳文件
• 若 showPreview 選項(xiàng)被設(shè)為 false, 或者不支持 uploadUrl, 插件將自動(dòng)降級(jí)為基于表單的正常上傳
• 可為待上傳着茸、成功上傳琐旁、上傳失敗的文件配置指示器
• 能夠?yàn)榛?Ajax 的上傳添加額外的 form data;
• 上傳進(jìn)度條和獨(dú)立的上傳指示器 縮略圖
• 能夠取消或退出正在進(jìn)行的 Ajax 上傳
• 建立初始預(yù)覽內(nèi)容（例如保存圖像的庫）【刺兀可以設(shè)置初始預(yù)覽操作（默認(rèn)預(yù)覽圖只有刪除按鈕牺陶，在預(yù)覽圖右下角）。還可以為初始預(yù)覽縮略圖設(shè)置其他自定義操作按鈕掰伸。
• 一旦 Ajax 上傳完成，自動(dòng)用從服務(wù)器返回的內(nèi)容刷新預(yù)覽圖

3. 使用模式

模式1: 表單提交

在此模式下合搅，不設(shè)置uploadURL屬性怕篷。該插件將使用原生的 file input 來存儲(chǔ)文件，并且可以在正常表單提交后讀壤任健（必須將 input 包裹在表單中）麻削。這對(duì)于單個(gè)文件上載或多個(gè)文件上載的更簡(jiǎn)單場(chǎng)景很有用春弥。配置很簡(jiǎn)單叠荠，您可以從原生表單提交中讀取所有 POST 的數(shù)據(jù)。但是逃呼，請(qǐng)注意者娱，原生的 file input 是只讀的，不能由外部代碼修改或更新推姻。尤其是對(duì)于多文件輸入選擇框沟，不能將文件追加到已選擇的文件列表中。如果試圖在已選定的 file input上選擇文件拧晕，它將覆蓋并清除以前的選擇梅垄。同樣，在此模式下蔫敲，上傳之前不能選擇性地 移除/刪除 已添加的文件炭玫。

注意：
自v4.4.8版以來，基于表單的上傳支持文件拖放裙犹。但是衔憨，對(duì)于基于表單的上傳，它僅限于支持將 FileList 對(duì)象分配給 file input 的瀏覽器践图，如chrome和mozilla码党。

模式2：Ajax 提交

此模式下斥黑，必須設(shè)置 uploadUrl 給一個(gè)有效的 ajax 處理服務(wù)器眉厨。若設(shè)置了 uploadUrl, 那么插件將自動(dòng)設(shè)置上傳模式為 ajax 上傳。該模式提供了一些 表單提交 模式不支持的高級(jí)特性鹿蜀。只有在此模式下服球，才能使用如在預(yù)覽區(qū) 追加 、移除 文件琐簇，獲取上傳進(jìn)度條座享，調(diào)整圖像大小的功能。瀏覽器必須支持 HTML5 FromData/XHR2 才能正常工作渣叛，并且處理Ajax調(diào)用的服務(wù)器代碼必須返回有效的JSON響應(yīng)淳衙。

模式對(duì)比

• 1 - 通過initialPreviewConfig(不適用未上傳的客戶端選定文件)
• 2 - 對(duì)于服務(wù)器上傳的文件(通過 initialPreviewConfig ) 和客戶端運(yùn)行時(shí)已選擇的文件
• 3 - 自4.4.8版本開始箫攀，支持基于表單的拖放，然而缀雳，基于表單的上傳只支持像 Chrome 和 Mozilla 這樣的支持分配文件列表對(duì)象 FileList 給原生的 file input 的瀏覽器

4 使用方法

注意：
如果給該 input 添加一個(gè) file 的類名梢睛，插件將自動(dòng)的轉(zhuǎn)換 <input type="file" /> 為文件選擇控制器。但是如果通過 javascript 來初始化插件, 就不要給該input添加 file這個(gè) class（因?yàn)檫@會(huì)導(dǎo)致重復(fù)的初始化并跳過javascript代碼）

使用：步驟1

在 <head></head>之間導(dǎo)入以下資源

<!-- 支持bootstrap 4.x . 也可以使用 bootstrap 3.3.x 版本的 css -->
<link rel="stylesheet"  crossorigin="anonymous">
<link  media="all" rel="stylesheet" type="text/css" />


<!-- 如果文字排版為從右向左深碱，在 fileinput 插件的css后導(dǎo)入 RTL CSS藏畅。可解注釋以下代碼 -->
<!-- link  media="all" rel="stylesheet" type="text/css" /-->


<!-- 使用 `fas` 主題(或 Bootstrap 4.x)需導(dǎo)入 font awesome 圖標(biāo)庫. 插件中默認(rèn)使用的圖標(biāo)是僅在 Bootstrap 3.x. 中打包的 glyphicons  -->
<link rel="stylesheet"  crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>


<!-- 當(dāng)需要圖片自動(dòng)調(diào)整方向時(shí)竞膳，或恢復(fù)已調(diào)整大小的圖像的exif數(shù)據(jù)時(shí)诫硕，或需要上傳前重置圖片尺寸，那么該 piexif.min.js 必須在  fileinput.min.js 之前導(dǎo)入 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.1/js/plugins/piexif.min.js" type="text/javascript"></script>


<!-- 僅當(dāng)您希望在初始預(yù)覽中對(duì)文件進(jìn)行排序/重新排列時(shí)锉走，才需要sortable.min.js藕届。必須在fileinput.min.js之前加載 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.1/js/plugins/sortable.min.js" type="text/javascript"></script>


<!-- purify.min.js 用來凈化在預(yù)覽區(qū)的HTML文件 的 HTML 內(nèi)容的. 必須在fileinput.min.js之前加載 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.1/js/plugins/purify.min.js" type="text/javascript"></script>


<!-- 如果使用bootstrap 4.x（用于poppover和工具提示），則需要下面的popper.min.js梁厉。. 您也可以使用  3.3.x 版本的 bootstrap js 踏兜，而不必引入 popper.min.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>


<!-- 如果想在模態(tài)框中縮放和預(yù)覽文件內(nèi)容，則要導(dǎo)入下面的 bootstrap.min.js . 支持bootstrap 4.x. 也可導(dǎo)入 3.3.x 版本的 bootstrap js . -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>


<!-- 導(dǎo)入插件的js文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.1/js/fileinput.min.js"></script>


<!-- 使用 Font Awesome 主題 (fas) 時(shí)肉盹，需要導(dǎo)入以下主題的js文件 -->
< script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.1/themes/fas/theme.min.js"></script -->


<!-- 如果需要設(shè)置插件語言疹尾，則可輔助性的導(dǎo)入以下路徑的語言文件包，將 LANG.js替換為你想設(shè)置的語言 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.1/js/locales/LANG.js"></script>

如果你注意到窍蓝，導(dǎo)入 fileinput.min.css 和 fileinput.min.js之外繁成，還需要導(dǎo)入 jquery.min.js 和 bootstrap.min.css. 引入Font Awesome css 文件fas/theme.min.js以導(dǎo)入 Font Awesome主題(注意：默認(rèn)Bootstrap 4.x 版本不包含 glyphicons 圖標(biāo)，所以你或許想同時(shí)使用font awesome Css 和 Font Awesome 主題)观蓄。你可以根據(jù)需要選擇插件語言祠墅。當(dāng)需要從右向左，則需要在fileinput.min.css之后導(dǎo)入fileinput-rtl.min.css

Bootstrap 4.x 的使用
注意亲茅，如果在使用該插件的時(shí)候，使用的是Bootstrap 4.0 和上面的插件克锣，那么 glyphicons 不再隨 Bootstrap 4.x打包袭祟。那么當(dāng)使用 Bootstrap 4.x 時(shí)，圖標(biāo)選項(xiàng)如下:
- OPTION 1: 單獨(dú)載入Glyphicons 的字體和css以保證插件的默認(rèn) icons 能被支持巾乳，因?yàn)椴寮J(rèn)使用的icons為Glyphicons
- OPITON 2: 使用作者提供的 Font Awesome 主題來配置插件并導(dǎo)入 Font Awesome 的 css 字體
- OPTION 3: 更改插件中使用的圖標(biāo)或創(chuàng)建自己的主題以呈現(xiàn)自己喜歡的圖標(biāo)胆绊。您可以查閱 krajee 提供的Font Awesome，設(shè)置您自己的圖標(biāo)主題压状。

可選的依賴插件

• piexif.min.js 是 [Piexifjs plugin by hMatoba](https://github.com/hMatoba/piexifjs) 的源文件种冬。當(dāng)我們想讓JPEG圖片文件基于朝向標(biāo)簽自動(dòng)調(diào)整方向時(shí)，它需要在 fileinput.min.js之前加載碌廓。當(dāng)使用 fileinput 插件的 圖像尺寸調(diào)整特性來恢復(fù) exif 數(shù)據(jù)給圖像時(shí)，也需要載入此庫
• sortable.min.js文件是rubaxa可排序插件的源文件慨蛙。如果希望在初始預(yù)覽中對(duì)縮略圖進(jìn)行排序纪挎，則需要在fileinput.min.js之前加載它。
• purify.min.js文件是cure53的dompurify插件的源文件通砍。如果您希望為HTML內(nèi)容預(yù)覽凈化HTML烤蜕，則需要在fileinput.min.js之前加載它。

使用：步驟2a

在頁面中初始化該插件虎忌。例如使用 javascript 進(jìn)行初始化 - 下面的代碼可以放在 document.ready 或者任意你想放置的地方

// initialize with defaults
$("#input-id").fileinput();
 
// with plugin options
$("#input-id").fileinput({'showUpload':false, 'previewFileType':'any'});

使用：步驟2b

或者橱鹏，您可以直接通過input的HTML5 data 屬性將插件選項(xiàng)設(shè)置給任何input堪藐。注意挑围，對(duì)于這種情況，您需要給 input 設(shè)置一個(gè) file 的類名模捂。
如前所述奏瞬，當(dāng)通過javascript初始化插件時(shí)（步驟2a）泉孩，不能給 input 設(shè)置名為 file 的類。

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

5 翻譯（語言設(shè)置）

如上使用方法版塊所述珍昨，翻譯在4.1.8版本可用句喷，遵照如下步驟來設(shè)置插件語言

• 從如下路徑 /js/locales/<lang>.js. 載入語言腳本文件,該腳本必須在fileinput.js文件之后載入。<lang>意為語言代碼<如 de, fr...>.如果你想要的語言文件不存在兄春，你可以提交一個(gè)pull請(qǐng)求锡溯，來創(chuàng)建新的翻譯文件。查看示例語言文件芜茵，為您自己的語言 復(fù)制并創(chuàng)建 翻譯配置文件
• 配置插件的語言屬性language為能被識(shí)別的語言代碼

6 Ajax 方式上傳

您需要設(shè)置服務(wù)器方法來解析并通過Ajax返回正確的響應(yīng)倡蝙。可遵照如下描述來配置異步或同步上傳猪钮。

異步上傳

這是默認(rèn)模式.其中 uploadAsync 選項(xiàng)設(shè)置為 true.當(dāng)上傳多個(gè)文件時(shí)胆建，異步模式允許為每個(gè)文件上傳觸發(fā)并行服務(wù)器調(diào)用。通過設(shè)置 maxFileCount 屬性拂玻，可以控制一次允許上傳的最多文件數(shù)。異步模式下檐蚜，將驗(yàn)證并更新每個(gè)縮略圖的進(jìn)度

• 服務(wù)器端接收數(shù)據(jù)
  在uploadURL 中設(shè)置的服務(wù)器方法從插件接收以下數(shù)據(jù)
  • 文件數(shù)據(jù): 此數(shù)據(jù)以非常類似于表單 file input 的格式發(fā)送到服務(wù)器,例如在PHP中闯第，你可以通過 $_FILES['input-name']讀取該數(shù)據(jù)，input-name 是 input 標(biāo)簽的 name 屬性咳短。如果你沒有給 input 設(shè)置 name 屬性咙好，默認(rèn)的 name 是 file_data. 注意，多文件上傳需要設(shè)置 input 的 multiple 屬性勾效。那么在 PHP 中，你會(huì)通過 $_FILES['file_data'] 來讀取文件數(shù)據(jù)
  • 額外數(shù)據(jù): 插件能發(fā)送額外數(shù)據(jù)給服務(wù)器的上傳接口杨伙∶韧龋可通過設(shè)置 uploadExtraData 屬性為鍵值對(duì)形式的關(guān)聯(lián)數(shù)組對(duì)象，因此米死，如果設(shè)置了 uploadExtraData=id:'kv-1',那么 PHP 中鼎俘，可通過 $_post['id']來讀取 id 值

注意
在異步模式下，您將始終在處理 Ajax 上傳的服務(wù)器上接受一個(gè)單個(gè)文件勘天∽叫希基本上，每個(gè)選中要上傳的文件均會(huì)觸發(fā)并行的 Ajax 調(diào)用宠进，您需要相應(yīng)的編寫服務(wù)器上傳邏輯藐翎，來始終讀取和上傳一個(gè)文件实幕。同樣堤器，在下面的發(fā)送數(shù)據(jù)部分，必須返回僅反映接收到的單個(gè)文件的數(shù)據(jù)的初始預(yù)覽

• 服務(wù)器端發(fā)送數(shù)據(jù)
  服務(wù)端在 uploadUrl 接口中整吆，必須返回一個(gè)json對(duì)象脂崔，如下

// example JSON response from server
{
    error: 'An error exception message if applicable',
    initialPreview: [
        // 如果希望在上傳后立即顯示服務(wù)器上傳文件的初始預(yù)覽縮略圖枉圃，則需要初始化該屬性
    ],
    initialPreviewConfig: [
        // 在初始預(yù)覽中的每一項(xiàng)的配置
    ],
    initialPreviewThumbTags: [
        // 初始預(yù)覽縮略圖標(biāo)記配置灰署，渲染時(shí)將動(dòng)態(tài)替換該配置
    ],
    append: true // 是否在初始預(yù)覽中追加內(nèi)容寸齐，也可將該屬性設(shè)置為 `false` 來覆蓋初始預(yù)覽
}

如果 服務(wù)器沒有數(shù)據(jù)返回，至少應(yīng)返回一個(gè)空對(duì)象 {}. 該對(duì)象由五部分組成渺鹦。在異步模式下毅厚，你始終會(huì)接受到一個(gè)文件記錄浦箱，因此請(qǐng)相應(yīng)的調(diào)整代碼。

• error: 字符串類型酷窥。該屬性是批量上傳的報(bào)錯(cuò)信息蓬推，它有助于插件對(duì)上傳錯(cuò)誤的識(shí)別。例如沸伏，服務(wù)器端可能會(huì)發(fā)送{error: 'You are not allowed to upload such a file.'}.注意毅糟，插件將自動(dòng)驗(yàn)證和展示 ajax 異常錯(cuò)誤
• initialPreview: 數(shù)組。指向上傳文件的圖片列表或任何 HTML 標(biāo)記的列表姆另。您將始終在此數(shù)組中發(fā)送發(fā)送一行-因?yàn)槟鷮⑹冀K以異步上傳的模式接收到一個(gè)文件。如果設(shè)置了該屬性蝶防，插件會(huì)自動(dòng)動(dòng)態(tài)替換預(yù)覽內(nèi)容中的文件。它的配置和 InitialPreview 選項(xiàng)設(shè)置類似渺绒。如：

initialPreview: [
    '<img src='/images/desert.jpg' class='file-preview-image' alt='Desert' title='Desert'>'
]

• initialPreviewConfig: 數(shù)組菱鸥。用于標(biāo)識(shí) InitialPreview 項(xiàng)（作為 InitialPreview的一部分設(shè)置）中每個(gè)文件標(biāo)記的屬性的配置。您將始終在此數(shù)組中發(fā)送一行殷绍，因?yàn)樵诋惒侥Ｊ较律蟼鲿r(shí)鹊漠，您將始終收到一個(gè)文件。如果設(shè)置了此屬性登钥，則在上傳成功后娶靡，插件將自動(dòng)動(dòng)態(tài)替換預(yù)覽內(nèi)容中的文件。此配置與InitialPreviewConfig選項(xiàng)設(shè)置類似塔鳍。例如：

initialPreviewConfig: [
    {
        caption: 'desert.jpg', 
        width: '120px', 
        url: 'http://localhost/avatar/delete', // server delete action 
        key: 100, 
        extra: {id: 100}
    }
]

• initialPreviewThumbTags: 數(shù)組呻此。對(duì)應(yīng)于在每個(gè)初始預(yù)覽縮略圖中替換標(biāo)記的對(duì)象數(shù)組。通過InitialPreview設(shè)置的初始預(yù)覽縮略圖將讀取此配置以替換標(biāo)記掌唾。

// change thumbnail footer template
// set initial preview template tags
initialPreviewThumbTags:[
    {
        '{CUSTOM_TAG_NEW}': ' ',
        '{CUSTOM_TAG_INIT}': '<span class=\'custom-css\'>CUSTOM MARKUP</span>'
    }
]

• append: 布爾值恃泪。
  如果在初始化的時(shí)候已經(jīng)設(shè)置了 initialPreview,是否將內(nèi)容追加到 initialPreview.若不設(shè)置，默認(rèn)為 true, 如果設(shè)置為 false.插件將覆蓋 initialPreview 中的內(nèi)容

• 服務(wù)器必須返回一個(gè) JSON情连，否則上傳將會(huì)失敗览效。即使你沒有遇到任何錯(cuò)誤虫几，也應(yīng)該從服務(wù)端返回一個(gè)空對(duì)象
• 要捕獲并顯示驗(yàn)證錯(cuò)誤信息挽拔，返回的json數(shù)據(jù)中必須包含 error 屬性螃诅。其值是要展示的HTML 標(biāo)記∈趼悖可以按照上面的提示設(shè)置
• 在服務(wù)器返回的JSON中，可以發(fā)送額外的 key 或數(shù)據(jù)搀崭，以便使用 fileuploaded 等事件處理高級(jí)情況下的鍵或者數(shù)據(jù)

同步上傳

這種模式下猾编，uploadAsync 被設(shè)置為 false.這會(huì)把數(shù)據(jù)以數(shù)據(jù)對(duì)象的形式觸發(fā)一次從客戶端到服務(wù)器的批量上傳。即時(shí)在這種模式下轰传，依然可以通過設(shè)置 maxFileCount 屬性來控制一次上傳的最大文件數(shù)苇羡。但是，在同步模式的時(shí)候，上傳進(jìn)度是總體進(jìn)度攘轩。預(yù)覽區(qū)中每個(gè)縮略圖的進(jìn)度沒有完全驗(yàn)證和更新。但是歼捏，該插件為您提供了一種識(shí)別每個(gè)文件面臨的上傳錯(cuò)誤的方法笨篷。

• 服務(wù)器端接收數(shù)據(jù)
  在 uploadUrl 中設(shè)置的服務(wù)器方法接受從插件傳入的如下數(shù)據(jù)

  • 文件數(shù)據(jù)： 數(shù)據(jù)以非常類似于表單 input="file"的形式傳給服務(wù)器率翅，例如在PHP中，你可以通過 $_FILES['input-name']來讀取數(shù)據(jù), input-name 是 input 標(biāo)簽的 name 屬性值冕臭。類似于前面異步模式燕锥，如果不設(shè)置 name 屬性悯蝉， name 值默認(rèn)為 file_data. 除了設(shè)置 multiple 為 true之外归形，你必須設(shè)置像此網(wǎng)站建議的數(shù)組格式設(shè)置你的 input 的 name.如果沒有將 input 的 name 設(shè)為數(shù)組格式，你只會(huì)接收到服務(wù)器返回的第一個(gè)文件鼻由。在PHP中暇榴，可通過$_FILES['input-name']接收到文件數(shù)據(jù)，該文件數(shù)據(jù)是一個(gè)文件對(duì)象的數(shù)組蕉世。
  • 額外數(shù)據(jù)：插件可發(fā)送額外數(shù)據(jù)給服務(wù)器方法蔼紧。可通過設(shè)置 uploadExtraData 為一個(gè)鍵值對(duì)形式的關(guān)聯(lián)數(shù)組對(duì)象歉井。所以，如果你設(shè)置了 uploadExtraData={id:'kv-1'}, 那么在 PHP 中哈误，可通過 \$_POST['id'] 讀取到額外數(shù)據(jù)中的 id.

• 服務(wù)器端發(fā)送數(shù)據(jù)
  在同步模式下哩至，uploadUrl 必須以JSON編碼的對(duì)象的形式發(fā)送數(shù)據(jù)。例如蜜自，服務(wù)器可以返回如下JSON對(duì)象：

// example JSON response from server
{
    error: 'An error exception message if applicable',
    errorkeys: [], // array of thumbnail keys/identifiers that have errored out (set via key property in initialPreviewConfig
    initialPreview: [
    ], // initial preview configuration 
    initialPreviewConfig: [
        // initial preview configuration if you directly want initial preview to be displayed with server upload data
    ],
    initialPreviewThumbTags: [
        // initial preview thumbnail tags configuration that will be replaced dynamically while rendering
    ],
    append: true // whether to append content to the initial preview (or set false to overwrite)
}