bootstrap fileinput插件使用中文說明

bootstrap-fileinput.js是一款文件上傳插件，總結這篇文章的原因是項目在使用laravel-admin開發後臺，laravel-admin上傳引用的插件爲 bootstrap-fileinput 。

此文爲laravel-admin上傳板塊的總結laravel-admin 文件上傳改爲異步上傳加進度條，以後遇見多文件需求也會更新此文章。

bootstrap-fileinput 中文文檔： http://www.mianshigee.com/tutorial/ruoyi/spilt.7.9d13d5720da9d371.md

表格引用參考上文，但是對一些參數，結合使用進行補充說明。

屬性介紹

 

屬性	類型	默認值	描述
language	String	‘en’	多語言設置，使用時需提前引入locales文件夾下對應的語言文件，中文zh，引入語言文件必須放在fileinput.js之後
showCaption	Boolean	true	是否顯示被選文件的簡介
showBrowse	Boolean	true	是否顯示瀏覽按鈕
showPreview	Boolean	true	是否顯示預覽區域
showRemove	Boolean	true	是否顯示移除按鈕
showUpload	Boolean	true	是否顯示上傳按鈕
showCancel	Boolean	true	是否顯示取消按鈕
showClose	Boolean	true	是否顯示關閉按鈕
showUploadedThumbs	Boolean	true	這個屬性是基於這樣一個使用方法的：選擇若干個文件後點擊右下角上傳按鈕批量上傳，待全部完成後再選擇一批文件，此時之前上傳成功的文件是否要保存。就是這個屬性控制的。注意，點擊文件縮略圖下面的上傳按鈕不會導致之前的成功上傳的文件消失，即使這裏設置了true
browseOnZoneClick	Boolean	false
autoReplace	Boolean	false	是否自動替換當前圖片，設置爲true時，再次選擇文件， 會將當前的文件替換掉。
generateFileId	Object	null
previewClass	String	空	添加預覽按鈕的類屬性
captionClass	String	空	添加標題類屬性
frameClass	String	‘krajee-default’	針對每個縮略圖的框架
mainClass	String	‘file-caption-main’	針對元素類屬性
mainTemplate	Object	null
purifyHtml	Boolean	true
fileSizeGetter	Object	null
initialCaption	String	空
initialPreview	Array/Object	[]	通過這個參數，我們可以爲文件區設置一些默認的縮略圖
initialPreviewDelimiter	String	‘$$’
initialPreviewAsData	Boolean	false
initialPreviewFileType	String	‘image’
initialPreviewConfig	Array/Object	[]
initialPreviewThumbTags	Array/Object	[]
previewThumbTags	Object	{}
initialPreviewShowDelete	Boolean	true
removeFromPreviewOnError	Boolean	false
deleteUrl	String	空	刪除圖片時的請求路徑
deleteExtraData	Object	{}	刪除圖片時額外傳入的參數
overwriteInitial	Boolean	true
previewZoomButtonIcons	Object	{prev: ”,next: ”,toggleheader: ”,fullscreen: ”,borderless: ”,close: ”},
previewZoomButtonClasses	Object	{prev: ‘btn btn-navigate’,next: ‘btn btn-navigate’,toggleheader: ‘btn btn-default btn-header-toggle’,fullscreen: ‘btn btn-default’,borderless: ‘btn btn-default’,close: ‘btn btn-default’},
preferIconicPreview	Boolean	false
preferIconicZoomPreview	Boolean	false
allowedPreviewTypes	undefined	undefined
allowedPreviewMimeTypes	Object	null
allowedFileTypes	Object	null	接收的文件後綴，如[‘jpg’, ‘gif’, ‘png’],不填將不限制上傳文件後綴類型
allowedFileExtensions	Object	null	指出帶有哪些後綴名的文件纔是被接受上傳的，設置msgInvalidFileExtension可以個性化出現此錯誤時的錯誤信息
defaultPreviewContent	Object	null
customLayoutTags	Object	{}
customPreviewTags	Object	{}
previewFileIcon	String	空	當文件無法被預覽時出現在縮略圖中的圖標，默認是
previewFileIconClass	String	‘file-other-icon’
previewFileIconSettings	Object	{}	可以將不同的後綴的文件有不同的縮略圖圖標
previewFileExtSettings	Object	{}
buttonLabelClass	String	‘hidden-xs’
browseIcon	String	空
browseClass	String	‘btn btn-primary’	指出了右下角選擇按鈕的樣式。一般儘量不要用btn-sm和btn-lg，會和左邊的輸入框不協調
removeIcon	String	空	刪除按鈕相關的屬性
removeClass	String	‘btn btn-default’
cancelIcon	String	空
cancelClass	String	‘btn btn-default’
uploadIcon	String	空	上傳按鈕相關的屬性
uploadClass	String	‘btn btn-default’
uploadUrl	String	null	上傳文件路徑
uploadAsync	boolean	true	是否爲異步上傳
uploadExtraData	Object	{}	上傳文件時額外傳遞的參數設置
zoomModalHeight	number	480
minImageWidth	String	null	圖片的最小寬度
minImageHeight	String	null	圖片的最小高度
maxImageWidth	String	null	圖片的最大寬度
maxImageHeight	String	null	圖片的最大高度
resizeImage	Boolean	false
resizePreference	String	‘width’
resizeQuality	number	0.92
resizeDefaultImageType	String	‘image/jpeg’
minFileSize	number	0	單位爲kb，上傳文件的最小大小值
maxFileSize	number	0	單位爲kb，如果爲0表示不限制文件大小
resizeDefaultImageType	number	25600(25MB)
minFileCount	number	0	表示同時最小上傳的文件個數
maxFileCount	number	0	表示允許同時上傳的最大文件個數
validateInitialCount	Boolean	false
msgValidationErrorClass	String	‘text-danger’
msgValidationErrorIcon	String	空
msgErrorClass	String	‘file-error-message’
progressThumbClass	String	“progress-bar progress-bar-success progress-bar-striped active”
rogressClass	String	“progress-bar progress-bar-success progress-bar-striped active”
progressCompleteClass	String	“progress-bar progress-bar-success”
progressErrorClass	String	“progress-bar progress-bar-danger”
progressUploadThreshold	number	99
previewFileType	String	‘image’	預覽文件類型,內置[‘image’, ‘html’, ‘text’, ‘video’, ‘audio’, ‘flash’, ‘object’,‘other‘]等格式
elCaptionContainer	String	null
elCaptionText	String	null	設置標題欄提示信息
elPreviewContainer	String	null
elPreviewImage	String	null
elPreviewStatus	String	null
elErrorContainer	String	null
errorCloseButton	String	×’
slugCallback	function	null	選擇後未上傳前 回調方法
dropZoneEnabled	Boolean	true	是否顯示拖拽區域
dropZoneTitleClass	String	‘file-drop-zone-title’	拖拽區域類屬性設置
fileActionSettings	Object	{}	設置預覽圖片的顯示樣式
otherActionButtons	String	空	編碼設置
textEncoding	String	‘UTF-8’
ajaxSettings	Object	{}
ajaxDeleteSettings	Object	{}
showAjaxErrorDetails	Boolean	true

 

Method 方法介紹

 

方法名	描述
fileerror	異步上傳錯誤結果處理$(‘#uploadfile’).on(‘fileerror’, function(event, data, msg) {});
fileuploaded	異步上傳成功結果處理$(“#uploadfile”).on(“fileuploaded”, function (event, data, previewId, index) {})
filebatchuploaderror	批量上傳錯誤結果處理$(‘#uploadfile’).on(‘filebatchuploaderror’, function(event, data, msg) {});
filebatchuploadsuccess	批量上傳成功結果處理$(‘#uploadfile’).on(‘filepreupload’, function(event, data, previewId, index) {});
filebatchselected	選擇文件後處理事件$(“#fileinput”).on(“filebatchselected”, function(event, files) {});
upload	文件上傳方法$(“#fileinput”).fileinput(“upload”);
fileuploaded	上傳成功後處理方法$(“#fileinput”).on(“fileuploaded”, function(event, data, previewId, index) {});
filereset	Possible values: http, https, ws, wss.
fileclear	點擊瀏覽框右上角X 清空文件前響應事件$(“#fileinput”).on(“fileclear”,function(event, data, msg){});
filecleared	點擊瀏覽框右上角X 清空文件後響應事件$(“#fileinput”).on(“filecleared”,function(event, data, msg){});
fileimageuploaded	在預覽框中圖片已經完全加載完畢後回調的事件

 

事件案例：filepreremove 在刪除前觸發事件 fileremoved在刪除觸發事件 調用通過on調用

$("#fileinputid").on("fileremoved", function (event, key, key2, data) {
    getMeg();
});

文件批量被選擇後觸發 （常用功能 選擇完成後調用上傳功能upload）。

 $("#fileinputid").on('filebatchselected', function (event, data) {

        $("#fileinputid").fileinput("upload");
        //選擇完成後主動上傳

   });

自定義事件： 在源碼定義位置使用self._raise(‘filepreremove’, [id, ind]);

filepremove 表示方法名 後面是參數數組 傳兩個參數 。無參數空數組即可。

對外可用方法：啓用縮略圖上刪除功能方法 通過fileinput(方法名)啓用：

$(“#fileinputid”).fileinput(‘_initFileActions’);//這行代碼綁定刪除remove事件的 無ajax $(“#fileinputid”).fileinput(‘_initPreviewActions’);//這行代碼綁定刪除delete事件的 ajax

_initFileActions 是remove _initPreviewActions 是delete 不一樣 一般使用第一種

upload 方法 調用後上傳選擇的圖片。

clear 清除方法 清除非initpreview的文件

reset 清除方法 清除所有文件