Bootstrap FileInput中文API整理
這段時(shí)間做項(xiàng)目用到bootstrap fileinput插件上傳文件，在用的過(guò)程中刊侯，網(wǎng)上能查到的api都不是很全脐瑰，所以想著整理一份比較詳細(xì)的文檔，方便自己今后使用但指，也希望能給大家?guī)?lái)幫助静袖，如有錯(cuò)誤觉鼻，希望大家積極指正。
$("#uploadfile").fileinput({
?????????????? ?language: 'zh', //設(shè)置語(yǔ)言
??????????????? uploadUrl:"http://127.0.0.1/testDemo/fileupload/upload.do", //上傳的地址
???????????????allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后綴
???????????????//uploadExtraData:{"id": 1, "fileName":'123.mp3'},
???????? ???????uploadAsync: true, //默認(rèn)異步上傳
??????????????? showUpload:true, //是否顯示上傳按鈕
??????????????? showRemove :true, //顯示移除按鈕
??????????????? showPreview :true, //是否顯示預(yù)覽
??????????????? showCaption:false,//是否顯示標(biāo)題
??????????????? browseClass:"btn btn-primary", //按鈕樣式????
???????????????dropZoneEnabled: false,//是否顯示拖拽區(qū)域
???????????????//minImageWidth: 50, //圖片的最小寬度
???????????????//minImageHeight: 50,//圖片的最小高度
???????????????//maxImageWidth: 1000,//圖片的最大寬度
???????????????//maxImageHeight: 1000,//圖片的最大高度
??????????????? //maxFileSize:0,//單位為kb，如果為0表示不限制文件大小
???????????????//minFileCount: 0,
??????????????? maxFileCount:10, //表示允許同時(shí)上傳的最大文件個(gè)數(shù)
??????????????? enctype:'multipart/form-data',
???????????????validateInitialCount:true,
??????? ????????previewFileIcon: "",
???????????????msgFilesTooMany: "選擇上傳的文件數(shù)量({n}) 超過(guò)允許的最大數(shù)值{m}捐康！",
???????????}).on("fileuploaded", function (event, data, previewId, index){
});
屬性名屬性類型描述說(shuō)明默認(rèn)值
languageString ? ? ? ? ? ? ? ? ? ? ??多語(yǔ)言設(shè)置，使用時(shí)需提前引入\locales文件夾下對(duì)應(yīng)的語(yǔ)言文件解总，中文zh贮匕，引入語(yǔ)言文件必須放在fileinput.js之后'en'
showCaptionBoolean是否顯示被選文件的簡(jiǎn)介true
showBrowseBoolean是否顯示瀏覽按鈕true
showPreviewBoolean是否顯示預(yù)覽區(qū)域true
showRemoveBoolean是否顯示移除按鈕true,
showUploadBoolean是否顯示上傳按鈕true,
showCancelBoolean是否顯示取消按鈕true,
showClose:Boolean是否顯示關(guān)閉按鈕true
showUploadedThumbsBoolean?true
browseOnZoneClickBoolean?false
autoReplaceBoolean是否自動(dòng)替換當(dāng)前圖片，設(shè)置為true時(shí)花枫，再次選擇文件刻盐， 會(huì)將當(dāng)前的文件替換掉。false
generateFileIdObject?null
previewClassString添加預(yù)覽按鈕的類屬性‘’
captionClassString?‘’
frameClassString?'krajee-default'
mainClassString?'file-caption-main'
mainTemplateObject?null
purifyHtmlBoolean?true
fileSizeGetterObject?null
initialCaptionString?''
initialPreviewArray/Object?[]
initialPreviewDelimiterString?'*$$*'
initialPreviewAsDataBoolean?false
initialPreviewFileTypeString?'image'
initialPreviewConfigArray/Object?[]
initialPreviewThumbTagsArray/Object?[]
previewThumbTagsObject?{}
initialPreviewShowDeleteBoolean?true
removeFromPreviewOnErrorBoolean?false
deleteUrlString刪除圖片時(shí)的請(qǐng)求路徑''
deleteExtraDataObject刪除圖片時(shí)額外傳入的參數(shù){}
overwriteInitialBoolean?true
previewZoomButtonIconsObject?{
prev: '',
? next: '',
? toggleheader: '',
? fullscreen: '',
? borderless: '',
??close: ''
},
previewZoomButtonClassesObject?{
? 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'
},
preferIconicPreviewBoolrean?false
preferIconicZoomPreviewBoolrean?false
allowedPreviewTypesundefined?undefined
allowedPreviewMimeTypesObject?null
allowedFileTypesObject接收的文件后綴劳翰，如['jpg', 'gif', 'png'],不填將不限制上傳文件后綴類型null
allowedFileExtensionsObject?null
defaultPreviewContentObject?null
customLayoutTagsObject?{}
customPreviewTagsObject?{}
previewFileIconString?''
previewFileIconClassString?'file-other-icon'
previewFileIconSettingsObject?{}
previewFileExtSettingsObject?{}
buttonLabelClassString?'hidden-xs'
browseIconString?' '
browseClassString?'btn btn-primary'
removeIconString?''
removeClassString?'btn btn-default'
cancelIconString?''
cancelClassString?'btn btn-default'
uploadIconString?''
uploadClassString?'btn btn-default'
uploadUrlString上傳文件路徑null
uploadAsyncboolean是否為異步上傳true
uploadExtraData?上傳文件時(shí)額外傳遞的參數(shù)設(shè)置{}
zoomModalHeightnumber?480
minImageWidthString圖片的最小寬度null
minImageHeightString圖片的最小高度null
maxImageWidthString圖片的最大寬度null
maxImageHeightString圖片的最大高度null
resizeImageboolean?false
resizePreferenceString?'width'
resizeQualitynumber?0.92
resizeDefaultImageTypeString?'image/jpeg'
minFileSizenumber單位為kb敦锌，上傳文件的最小大小值0
maxFileSizenumber單位為kb，如果為0表示不限制文件大小0
resizeDefaultImageTypenumber?25600(25MB)
minFileCountnumber表示同時(shí)最小上傳的文件個(gè)數(shù)0
maxFileCountnumber表示允許同時(shí)上傳的最大文件個(gè)數(shù)0
validateInitialCountboolean?false
msgValidationErrorClassString?'text-danger'
msgValidationErrorIconString?' '
msgErrorClassString?'file-error-message'
progressThumbClassString?"progress-bar progress-bar-success progress-bar-striped active"
rogressClassString?"progress-bar progress-bar-success progress-bar-striped active"
progressCompleteClassString?"progress-bar progress-bar-success"
progressErrorClassString?"progress-bar progress-bar-danger"
progressUploadThresholdnumber?99
previewFileTypeString預(yù)覽文件類型,內(nèi)置['image', 'html', 'text', 'video', 'audio', 'flash', 'object',‘other‘]等格式'image'
elCaptionContainerString?null
elCaptionTextString設(shè)置標(biāo)題欄提示信息null
elPreviewContainerString?null
elPreviewImageString?null
elPreviewStatusString?null
elErrorContainerString?null
errorCloseButtonString?'×'
slugCallbackString?null
dropZoneEnabledboolean是否顯示拖拽區(qū)域true
dropZoneTitleClassString拖拽區(qū)域類屬性設(shè)置'file-drop-zone-title'
fileActionSettingsObject設(shè)置預(yù)覽圖片的顯示樣式{
??? showRemove: true,
??? showUpload: false,
??? showZoom: true,
??? showDrag: true,
??? removeIcon: '',
??? removeClass: 'btn btn-xs btn-default',
??? removeTitle: 'Remove file',
??? uploadIcon: '',
??? uploadClass: 'btn btn-xs btn-default',
??? uploadTitle: 'Upload file',
??? zoomIcon: '',
??? zoomClass: 'btn btn-xs btn-default',
??? zoomTitle: 'View Details',
??? dragIcon: '',
??? dragClass: 'text-info',
??? dragTitle: 'Move / Rearrange',
??? dragSettings: {},
??? indicatorNew: '',
??? indicatorSuccess: '',
??? indicatorError: '',
??? indicatorLoading: '',
??? indicatorNewTitle: 'Not uploaded yet',
??? indicatorSuccessTitle: 'Uploaded',
??? indicatorErrorTitle: 'Upload Error',
??? indicatorLoadingTitle: 'Uploading ...'
}
otherActionButtonsString?''
textEncodingString編碼設(shè)置'UTF-8'
ajaxSettingsObject?{}
ajaxDeleteSettingsObject?{}
showAjaxErrorDetailsboolean?true
屬性名默認(rèn)值中文
fileSinglefile文件
filePluralfiles個(gè)文件
browseLabelBrowse &hellip選擇 …
removeLabelRemove移除
removeTitleClear selected files清除選中文件
cancelLabelCancel取消
cancelTitleAbort ongoing upload取消進(jìn)行中的上傳
uploadLabelUpload上傳
uploadTitleUpload selected files上傳選中文件
msgNoNo沒有
msgNoFilesSelectedNo files selected“”
msgCancelledCancelled取消
msgZoomModalHeadingDetailed Preview詳細(xì)預(yù)覽
msgSizeTooSmallFile "{name}" ({size} KB) is too small and must be larger than {minSize} KB.File "{name}" ({size} KB) is too small and must be larger than {minSize} KB.
msgSizeTooLargeFile "{name}" ({size} KB) exceeds maximum allowed upload size of {maxSize} KB.文件 "{name}" ({size} KB) 超過(guò)了允許大小 {maxSize} KB.
msgFilesTooLessYou must select at least {n} {files} to upload.你必須選擇最少 {n} {files} 來(lái)上傳.
msgFilesTooManyNumber of files selected for upload ({n}) exceeds maximum allowed limit of {m}.選擇的上傳文件個(gè)數(shù) ({n}) 超出最大文件的限制個(gè)數(shù) {m}.
msgFileNotFoundFile "{name}" not found!文件 "{name}" 未找到!
msgFileSecuredSecurity restrictions prevent reading the file "{name}".安全限制乙墙，為了防止讀取文件 "{name}".
msgFileNotReadableFile "{name}" is not readable.文件 "{name}" 不可讀.
msgFilePreviewAbortedFile preview aborted for "{name}".取消 "{name}" 的預(yù)覽.
msgFilePreviewErrorAn error occurred while reading the file "{name}".讀取 "{name}" 時(shí)出現(xiàn)了一個(gè)錯(cuò)誤.
msgInvalidFileNameInvalid or unsupported characters in file name "{name}".Invalid or unsupported characters in file name "{name}".
msgInvalidFileTypeInvalid type for file "{name}". Only "{types}" files are supported.不正確的類型 "{name}". 只支持 "{types}" 類型的文件.
msgInvalidFileExtensionInvalid extension for file "{name}". Only "{extensions}" files are supported.不正確的文件擴(kuò)展名 "{name}". 只支持 "{extensions}" 的文件擴(kuò)展名.
msgFileTypes{
??????????? 'image': 'image',
??????????? 'html': 'HTML',
??????????? 'text': 'text',
??????????? 'video': 'video',
??????????? 'audio': 'audio',
??????????? 'flash': 'flash',
??????????? 'pdf': 'PDF',
??????????? 'object': 'object'
??????? },
{
??????????? 'image': 'image',
??????????? 'html': 'HTML',
??????????? 'text': 'text',
??????????? 'video': 'video',
??????????? 'audio': 'audio',
??????????? 'flash': 'flash',
??????????? 'pdf': 'PDF',
??????????? 'object': 'object'
??????? },
msgUploadAbortedThe file upload was aborted該文件上傳被中止
msgUploadThresholdProcessing...Processing...
msgUploadBeginInitializing...Initializing...
msgUploadEndDoneDone
msgUploadEmptyNo valid data available for upload.No valid data available for upload.
msgValidationErrorValidation Error驗(yàn)證錯(cuò)誤
msgLoadingLoading file {index} of {files} …加載第 {index} 文件 共 {files} …
msgProgressLoading file {index} of {files} - {name} - {percent}% completed.加載第 {index} 文件 共 {files} - {name} - {percent}% 完成.
msgSelected{n} {files} selected{n} {files} 選中
msgFoldersNotAllowedDrag & drop files only! {n} folder(s) dropped were skipped.只支持拖拽文件! 跳過(guò) {n} 拖拽的文件夾.
msgImageWidthSmallWidth of image file "{name}" must be at least {size} px.寬度的圖像文件的"{name}"的必須是至少{size}像素.
msgImageHeightSmallHeight of image file "{name}" must be at least {size} px.圖像文件的"{name}"的高度必須至少為{size}像素.
msgImageWidthLargeWidth of image file "{name}" cannot exceed {size} px.寬度的圖像文件"{name}"不能超過(guò){size}像素.
msgImageHeightLargeHeight of image file "{name}" cannot exceed {size} px.圖像文件"{name}"的高度不能超過(guò){size}像素.
msgImageResizeErrorCould not get the image dimensions to resize.無(wú)法獲取的圖像尺寸調(diào)整。
msgImageResizeExceptionError while resizing the image.
{errors}錯(cuò)誤而調(diào)整圖像大小生均。
{errors}msgAjaxErrorSomething went wrong with the {operation} operation. Please try again later!Something went wrong with the {operation} operation. Please try again later!
msgAjaxProgressError{operation} failed{operation} failed
ajaxOperations{
??????????? deleteThumb: 'file delete',
??????????? uploadThumb: 'file upload',
??????????? uploadBatch: 'batch file upload',
??????????? uploadExtra: 'form data upload'
??????? },
{
??????????? deleteThumb: 'file delete',
??????????? uploadThumb: 'file upload',
??????????? uploadBatch: 'batch file upload',
??????????? uploadExtra: 'form data upload'
??????? },
dropZoneTitleDrag & drop files here …拖拽文件到這里 …
支持多文件同時(shí)上傳
dropZoneClickTitle
(or click to select {files})
(或點(diǎn)擊{files}按鈕選擇文件)
previewZoomButtonTitles{
??????????? prev: 'View previous file',
??????????? next: 'View next file',
??????????? toggleheader: 'Toggle header',
??????????? fullscreen: 'Toggle full screen',
??????????? borderless: 'Toggle borderless mode',
??????????? close: 'Close detailed preview'
??????? }
{
??????????? prev: '預(yù)覽上一個(gè)文件',
??????????? next: '預(yù)覽下一個(gè)文件',
??????????? toggleheader: '縮放',
??????????? fullscreen: '全屏',
??????????? borderless: '無(wú)邊界模式',
??????????? close: '關(guān)閉當(dāng)前預(yù)覽'
??????? }
fileActionSettings?{???? removeTitle: '刪除文件',
??????????? uploadTitle: '上傳文件',
??????????? zoomTitle: '查看詳情',
??????????? dragTitle: '移動(dòng) / 重置',
??????????? indicatorNewTitle: '沒有上傳',
??????????? indicatorSuccessTitle: '上傳',
??????????? indicatorErrorTitle: '上傳錯(cuò)誤',
??????????? indicatorLoadingTitle: '上傳 ...'
??????? },
方法名參數(shù)描述
fileerror?異步上傳錯(cuò)誤結(jié)果處理
$('#uploadfile').on('fileerror', function(event, data, msg) {
});
fileuploaded?異步上傳成功結(jié)果處理
$("#uploadfile").on("fileuploaded", function (event, data, previewId, index) {
})
filebatchuploaderror?同步上傳錯(cuò)誤結(jié)果處理
$('#uploadfile').on('filebatchuploaderror', function(event, data, msg) {
});
filebatchuploadsuccess?同步上傳成功結(jié)果處理
$('#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??
fileclear?點(diǎn)擊瀏覽框右上角X 清空文件前響應(yīng)事件
$("#fileinput").on("fileclear",function(event, data, msg){
});
filecleared?點(diǎn)擊瀏覽框右上角X 清空文件后響應(yīng)事件
$("#fileinput").on("filecleared",function(event, data, msg){
});
fileimageuploaded?在預(yù)覽框中圖片已經(jīng)完全加載完畢后回調(diào)的事件
filepreremove 縮略圖刪除事件
fileremoved 縮略圖刪除后的回調(diào)事件
?(1)?? 當(dāng)點(diǎn)擊上傳后马胧，報(bào)錯(cuò)汉买，提示你必須選擇最少X個(gè)文件上傳。
錯(cuò)誤原因:html中input標(biāo)簽元素屬性：data-min-file-count="2" 設(shè)置為X個(gè)文件漓雅，限制上傳文件數(shù)录别。
