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 |
|
|