bootstrap-fileinput初體驗

該文件上傳插件比普通的文件上傳插件功能更強大，它可以對圖片、文本文件、HTML文件、視頻文件、音頻文件、flash文件生成預覽圖。另外，它還可以基於AJAX上傳文件，拖拽上傳文件，查看上傳進度，可以選擇性的預覽，添加或刪除文件。

引入文件：

 1 <link href="/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
 2 <link href="/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
 3 <script src="jquery/2.1.1/jquery.min.js"></script>
 4 <script src="path/to/js/fileinput.min.js"></script>
 5 <!-- bootstrap.js below is only needed if you wish to the feature of viewing details
 6      of text file preview via modal dialog -->
 7 <script src="bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>
 8 <!-- optionally if you need translation for your language then include 
 9     locale file as mentioned below -->
10 <script src="path/to/js/fileinput_locale_zh.js"></script>

1 <form enctype="multipart/form-data" method="POST">
2     <div class="form-group">
3         <input id="file-1" type="file" multiple class="file" name="userfile" data-overwrite-initial="false" data-min-file-count="2">
4     </div>
5 </form>

 1 <script type="text/javascript">
 2     $("#file-1").fileinput({
 3             uploadUrl: 'fileupload', // you must set a valid URL here else you will get an error
 4             allowedFileExtensions : ['jpg','png'],
 5             overwriteInitial: false,
 6             maxFileSize: 6000,
 7             maxFilesNum: 10,
 8             //allowedFileTypes: ['image', 'video', 'flash'],
 9             slugCallback: function(filename) {
10                 return filename.replace('(', '_').replace(']', '_');
11             }
12         });
13 </script>

參數配置：

showCaption：是否顯示文件的標題。默認值true。
showPreview：是否顯示文件的預覽圖。默認值true。
showRemove：是否顯示刪除/清空按鈕。默認值true。
showUpload：是否顯示文件上傳按鈕。默認是submit按鈕，除非指定了uploadUrl屬性。默認值true。
showCancel：是否顯示取消文件上傳按鈕。只有在AJAX上傳線程中該屬性才可見可用。默認值true。
captionClass：在標題容器上額外的class。類型string。
previewClass：在預覽區域容器上的額外的class。類型string。
mainClass：添加在文件上傳主容器。類型string。
initialDelimiter：在initialPreview屬性中用於上傳多個文件時的分隔符。默認值：'*$$*'。
initialPreview：類型string或array。顯示的初始化預覽內容。你可以傳入一個簡單的HTML標簽用於顯示圖片、文本或文件。如果設置一個字符串，會在初始化預覽圖中顯示一個文件。你可以在initialDelimiter屬性中設置分隔符用於顯示多個預覽圖。如果設置為數組，初始化預覽圖中會顯示數組中所有的文件。

其中的一個demo效果展示：

bootstrap-fileinput初體驗

免責聲明！