1、boottrap fileinput 如果在標籤中設定相應引數，則再JS中進行初始化引數不會被執行，這個坑簡直太坑了。我搞了一一晚上才發現。

總結如下：

用法

Kai edited this page on 26 Apr 2017 · 1 revision

用法

注意

如果你將一個css class='file'屬性賦予input標籤，外掛將自動把欄位[input type="file"]轉換為檔案輸入控制元件。但是，如果你想通過javascript單獨初始化外掛，那麼請勿將cssclass='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 圖示樣式。可選擇加入 語言.js，可以把外掛翻譯成你的語言。

可選的依賴外掛

• canvas-to-blob.min.js檔案：是blueimp的JavaScript-Canvas-to-Blob外掛的原始碼。如果你想在上傳之前修改圖片大小,在fileinput.min.js之前需要先載入它。
• sortable.min.js檔案：是rubaxa可排序外掛的原始碼。如果你希望在初始預覽中對縮圖進行排序，則需要先載入它。
• purify.min.js檔案：是cure53的DomPurify外掛的原始碼。如果你希望淨化預覽的HTML內容，則需要載入它。

步驟2a

在你的頁面中初始化這個外掛，像下面的樣例程式碼一樣：

// 使用預設引數初始化外掛
$("#input-id").fileinput();
 
// 使用外掛引數初始化
$("#input-id").fileinput({'showUpload':false, 'previewFileType':'any'});

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

步驟 2b

或者，你可以直接將外掛選項設定為任何輸入，通過HTML5的data-*屬性到你的輸入域。

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