紹

對于文件上傳，我們并不陌生，HTML自帶了上傳文件表單，但是我們都知道，那些真的滿足不了我們的大多數需求，諸如多選、預覽、刪除、拖拽等各類繁雜的功能，原生的文件上傳Input確實很難滿足我們的需求，因此就誕生了很多第三方的上傳組件，比如大家熟知的百度WebUploader、之前我也有介紹過類似的組件，功能都非常豐富，大家可以根據自己的需求酌情選擇，符合自己的需要才是最好的，當然原生的或許就夠了呢！

Github

https://github.com/kartik-v/bootstrap-fileinput

此項目一共多大一千多次提交，60+發布以及，4k+star，可見還是很受廣大開發者的認可的！

功能描述

以下是借助翻譯將功能大致描述下：

1、Bootstrap 3.x和4.x的增強型HTML 5文件輸入以及各種文件的文件預覽，提供多種選擇，可恢復的塊上傳等；

2、該插件允許您使用一種簡單的方法來設置高級文件選擇器/上傳控件，該控件專為Bootstrap 3.x或4.x CSS3樣式而設計；

3、它通過提供支持來預覽各種文件，即圖像，文本，html，視頻，音頻，閃存和對象，進一步增強了文件輸入功能。

4、此外，它還包括基于AJAX的上傳，拖放文件，查看上傳進度以及有選擇地預覽，添加或刪除文件。

安裝使用

【1】使用bower

bower install bootstrap-fileinput

【2】使用npm

npm install bootstrap-fileinput

【3】初始化，例如

//默認
$("#input-id").fileinput();
// 外加插件
$("#input-id").fileinput({'showUpload':false, 'previewFileType':'any'});

所有特性

文件輸入功能（翻譯+意譯）：

1、該插件將簡單的HTML文件輸入轉換為高級文件選擇器控件。對于不支持JQuery或Javascript的瀏覽器，將有助于回退到正常的HTML文件輸入。

2、文件輸入包含以下三個部分，其中包含用于控制顯示的選項和模板：

• 文件標題部分：顯示所選文件的簡要信息
• 文件操作按鈕部分：瀏覽，刪除和上傳文件。
• 文件預覽部分：在客戶端上顯示所選文件以進行預覽（支持圖像，文本，閃存和視頻文件類型的預覽）。其他文件類型將顯示為普通縮略圖。

3、type=file如果設置了插件，插件會自動將輸入轉換為高級文件選擇器輸入class=file。輸入的所有選項都可以作為HTML5 data屬性傳遞 。

4、能夠選擇和預覽多個文件。使用HTML 5文件閱讀器API來讀取和預覽文件。如果選擇了多個文件，則顯示正在加載到預覽區域的文件的進度。

5、提供預定義的模板和CSS類，可根據需要更改為文件輸入顯示的樣式。

6、能夠配置插件以顯示帶有初始標題的圖像/文件的初始預覽 （對于記錄更新方案更有用）。參考initialPreview， initialPreviewConfig，和 initialCaption 插件選項部分中的屬性用于配置此屬性。

7、能夠將內容縮放為詳細預覽。在預覽中查看縮放內容的幻燈片，最大化為無邊框或全屏預覽。

8、能夠通過拖放在初始預覽中對內容進行排序/重新排列。

9、能夠完全控制窗口小部件并控制樣式和布局。

10、通過語言環境/翻譯支持同一頁面上的多語言小部件。

11、顯示/隱藏以下任何或所有內容的選項：

• 標題部分
• 預覽部分
• 上傳按鈕
• 刪除按鈕

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

13、對于文本文件預覽，將文本自動換行到縮略圖寬度，并顯示環繞指示符以在懸停時顯示完整文本。您可以自定義換行指示符（默認為...）。

14、自定義預覽，進度和所選文件的信息。

15、上傳操作默認為表單提交。支持上傳路由/服務器操作參數，用于基于自定義ajax的上傳

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

17、已禁用和只讀文件輸入支持。

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

19、提升fileimageuploaded在預覽容器上完全加載圖像后觸發的新事件。

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

21、完全模板化和可擴展，允許以開發人員想要的方式配置文件輸入。

22、基于各種文件預覽類型預覽智能。內置的文件支持類型分類為 image，text，html，video，audio，flash， object，和other。

23、allowedPreviewTypes：您現在可以配置允許將哪些文件類型顯示為預覽。默認為['image', 'html', 'text', 'video', 'audio', 'flash', 'object']。因此，默認情況下，所有文件類型都被視為要預覽的對象。對于只有exampleTo預覽image 和video，你可以將其設置為['image', 'video']。要禁用所有文件類型的內容預覽并將其顯示previewIcon為縮略圖，請將其設置為null，empty或false。

24、allowedPreviewMimeTypes：除此之外allowedPreviewTypes，您還可以控制可以顯示哪些mime類型以供預覽。默認為null，表示支持所有mime類型。>注意：對于2.5.0版，您現在可以通過設置allowedFileTypes和控制允許上載哪些文件類型或擴展名allowedFileExtensions。

25、layoutTemplates：允許您在一個屬性中配置所有布局模板設置。可配置的布局的對象是：main1，main2， preview，caption，和modal。

26、previewTemplates：每種預覽類型的所有預覽模板都已合并為一個屬性，而不是圖像，文本等的單獨模板。鍵是設置的格式allowedPreviewTypes，值是用于預覽的模板。下面是每個預覽文件類型（默認預置的模板generic，image，text，html， video，audio，flash，object，和other）。該generic模板僅用于initialPreview使用直接標記顯示 內容。

27、previewSettings：允許您為每個預覽圖像類型配置寬度和高度。該插件具有默認的寬度和預定義的每個類型，即高度 image，text，html，video，audio，flash，和object。

28、fileTypeSettings：允許您使用回調配置和標識每個預覽文件類型。該插件具有預定義識別不同類型即默認回調 image，text，html，video，audio，flash，和object。

29、替換模板中的標簽已得到增強。使用此版本，它將自動檢查要在模板字符串中替換的每個標記的多次出現。

30、通過在任何其他事件中將輸出返回到中止上載，操作事件并輕松添加自己的自定義驗證消息。

31、支持多語言和區域設置。

總結

好用的插件千千萬，當你正缺少這樣一個強大的文件上傳組件時，bootstrap-fileinput或許能幫到你，它雖然不是我用過最好的，但至少能符合很多場景下的需求了，特別適合對于文件上傳非常頻繁的時候來說，真的非常有用，希望能給你帶來幫助，當然您如果有更好的推薦，則感謝在評論區留言分享！

PS：筆者近期想深入的學習下Javascript,小伙伴們知道現在有什么書籍比較合適么，網絡上的系統化的較少，想要系統的深入學習下，感謝推薦的道友們！