fileinput 配置項大全,從源碼中翻出了很多屬性,沒那么多時間一一驗證,特發出來給大家參考參考
option
| 屬性名 |
屬性類型 |
描述說明 |
默認值 |
| language |
String |
多語言設置,使用時需提前引入\locales文件夾下對應的語言文件,中文zh,引入語言文件必須放在fileinput.js之后 |
'en' |
| showCaption |
Boolean |
是否顯示被選文件的簡介 |
true |
| showBrowse |
Boolean |
是否顯示瀏覽按鈕 |
true |
| showPreview |
Boolean |
是否顯示預覽區域 |
true |
| showRemove |
Boolean |
是否顯示移除按鈕 |
true |
| showUpload |
Boolean |
是否顯示上傳按鈕 |
true |
| showCancel |
Boolean |
是否顯示取消按鈕 |
true |
| showClose |
Boolean |
是否顯示關閉按鈕 |
true |
| showUploadedThumbs |
Boolean |
|
true |
| mainClass |
|
|
|
| autoReplace |
Boolean |
是否自動替換當前圖片,設置為true時,再次選擇文件,會將當前的文件替換掉。 |
false |
| previewClass |
String |
添加預覽按鈕的類屬性 |
‘’ |
| captionClass |
String |
|
‘’ |
| deleteUrl |
String |
刪除圖片時的請求路徑 |
'' |
| deleteExtraData |
Object |
刪除圖片時額外傳入的參數 |
|
| allowedFileTypes |
Object |
接收的文件后綴,如['jpg', 'gif', 'png'],不填將不限制上傳文件后綴類型 |
null |
| uploadUrl |
String |
上傳文件路徑 |
null |
| uploadAsync |
boolean |
是否為異步上傳 |
true |
| uploadExtraData |
|
上傳文件時額外傳遞的參數設置 |
{} |
| minImageWidth |
String |
圖片的最小寬度 |
null |
| minImageHeight |
String |
圖片的最小高度 |
null |
| maxImageWidth |
String |
圖片的最大寬度 |
null |
| maxImageHeight |
String |
圖片的最大高度 |
null |
| minFileSize |
number |
單位為kb,上傳文件的最小大小值 |
0 |
| maxFileSize |
number |
單位為kb,如果為0表示不限制文件大小 |
0 |
| resizeDefaultImageType |
number |
調整默認圖像類型 |
25600(25MB) |
| minFileCount |
number |
表示同時最小上傳的文件個數 |
0 |
| maxFileCount |
number |
表示允許同時上傳的最大文件個數 |
0 |
| validateInitialCount |
boolean |
驗證初始計數 |
false |
| previewFileType |
String |
預覽文件類型,內置['image', 'html', 'text', 'video', 'audio', 'flash', 'object',‘other‘]等格式 |
'image' |
| elCaptionText |
String |
設置標題欄提示信息 |
null |
| dropZoneEnabled |
boolean |
是否顯示拖拽區域 |
true |
| dropZoneTitleClass |
String |
拖拽區域類屬性設置 |
'file-drop-zone-title' |
| textEncoding |
String |
編碼設置 |
'UTF-8' |
| mainTemplate |
|
|
|
| initialCaption |
|
|
|
| initialPreview |
|
|
|
| initialPreviewDelimiter |
|
|
|
| initialPreviewConfig |
|
|
|
| initialPreviewThumbTags |
|
|
|
| previewThumbTags |
|
|
|
| initialPreviewShowDelete |
|
|
|
| overwriteInitial |
|
|
|
| layoutTemplates |
Object |
可對部分DOM結構進行配置,可配置值:main1,main2,preview,close,zoom,icon,caption,modal,progress,footer,actions,actionDelete,actionUpload,btnDefault,btnLink,btnBrowse |
DOM結構,如果賦值為空字符串,則表示不需要該功能 |
| previewTemplates |
|
|
|
| allowedPreviewTypes |
|
|
|
| allowedPreviewMimeTypes |
|
|
|
| allowedFileExtensions |
|
|
|
| defaultPreviewContent |
|
|
|
| customLayoutTags |
|
|
|
| customPreviewTags |
|
|
|
| previewSettings |
|
|
|
| fileTypeSettings |
|
|
|
| previewFileIcon |
|
|
|
| previewFileIconClass |
|
|
|
| previewFileIconSettings |
|
|
|
| previewFileExtSettings |
|
|
|
| buttonLabelClass |
|
|
|
| browseIcon |
|
|
|
| browseClass |
|
|
|
| removeIcon |
|
|
|
| removeClass |
|
|
|
| cancelIcon |
|
|
|
| cancelClass |
|
|
|
| uploadIcon |
|
|
|
| uploadClass |
|
|
|
| resizeImage |
|
|
|
| resizePreference |
|
|
|
| resizeQuality |
|
|
|
| msgValidationErrorClass |
|
|
|
| msgValidationErrorIcon |
|
|
|
| msgErrorClass |
|
|
|
| progressThumbClass |
|
|
|
| progressClass |
|
|
|
| progressCompleteClass |
|
|
|
| zoomIndicator |
|
|
|
| elCaptionContainer |
|
|
|
| elPreviewContainer |
|
|
|
| elPreviewImage |
|
|
|
| elPreviewStatus |
|
|
|
| elErrorContainer |
|
|
|
| errorCloseButton |
|
|
|
| slugCallback |
|
|
null |
| fileActionSettings |
|
|
對象 |
| otherActionButtons |
|
|
'' |
| ajaxSettings |
|
|
對象 |
| ajaxDeleteSettings |
|
|
對象 |
| showAjaxErrorDetails |
|
|
true |
方法
| 方法名 |
參數 |
描述 |
| 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 |
上傳成功后處理方法,fileuploaded后會對部分DOM結構重新渲染 |
$("#fileinput").on("fileuploaded", function(event, data, previewId, index) {}); |
| filebatchuploadcomplete |
所有文件上傳成功后執行,執行時機在fileuploaded后 |
$("#fileinput").on("filebatchuploadcomplete", function(event, data, previewId, index) {}); |
| filereset |
|
|
| fileclear |
點擊瀏覽框右上角X 清空文件前響應事件 |
$("#fileinput").on("fileclear",function(event, data, msg){ }); |
| filesuccessremove |
刪除單張圖片事件,只針對已經上傳的圖片 |
$("#fileinput").on("filesuccessremove",function(event, data, msg){ }); |
| fileremoved |
刪除單張圖片,但只針對未上傳的圖片 |
$("#fileinput").on("fileremoved",function(event, data, msg){ }); |
| filecleared |
點擊瀏覽框右上角X 清空文件后響應事件 |
$("#fileinput").on("filecleared",function(event, data, msg){}); |
| fileimageuploaded |
在預覽框中圖片已經完全加載完畢后回調的事件 |
|
| filefoldererror |
|
|
| fileuploaderror |
|
|
| filedeleteerror |
|
|
| filepredelete |
|
|
| filedeleted |
|
|
| filecustomerror |
|
|
| fileunlock |
|
|
| filedisabled |
|
|
| fileenabled |
|
|
| filepreajax |
|
|
| filebatchpreupload |
|
|
| filepreremove |
|
|
| fileloaded |
|
|
| fileselect |
|
|
| fileselectnone |
|
|
| fileimageloaded |
|
|
| fileimageresizeerror |
|
|
| fileimagesresized |
|
|
| dragenter.fileinput |
|
|
| dragover.fileinput |
|
|
| drop.fileinput |
|
|