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

表格引用参考上文，但是对一些参数，结合使用进行补充说明。

属性介绍

属性类型默认值描述
languageString‘en’多语言设置，使用时需提前引入locales文件夹下对应的语言文件，中文zh，引入语言文件必须放在fileinput.js之后
showCaptionBooleantrue是否显示被选文件的简介
showBrowseBooleantrue是否显示浏览按钮
showPreviewBooleantrue是否显示预览区域
showRemoveBooleantrue是否显示移除按钮
showUploadBooleantrue是否显示上传按钮
showCancelBooleantrue是否显示取消按钮
showCloseBooleantrue是否显示关闭按钮
showUploadedThumbsBooleantrue这个属性是基于这样一个使用方法的：选择若干个文件后点击右下角上传按钮批量上传，待全部完成后再选择一批文件，此时之前上传成功的文件是否要保存。就是这个属性控制的。注意，点击文件缩略图下面的上传按钮不会导致之前的成功上传的文件消失，即使这里设置了true
browseOnZoneClickBooleanfalse 
autoReplaceBooleanfalse是否自动替换当前图片，设置为true时，再次选择文件， 会将当前的文件替换掉。
generateFileIdObjectnull 
previewClassString空添加预览按钮的类属性
captionClassString空添加标题类属性
frameClassString‘krajee-default’针对每个缩略图的框架
mainClassString‘file-caption-main’针对元素类属性
mainTemplateObjectnull 
purifyHtmlBooleantrue 
fileSizeGetterObjectnull 
initialCaptionString空 
initialPreviewArray/Object[]通过这个参数，我们可以为文件区设置一些默认的缩略图
initialPreviewDelimiterString‘$$’ 
initialPreviewAsDataBooleanfalse 
initialPreviewFileTypeString‘image’ 
initialPreviewConfigArray/Object[] 
initialPreviewThumbTagsArray/Object[] 
previewThumbTagsObject{} 
initialPreviewShowDeleteBooleantrue 
removeFromPreviewOnErrorBooleanfalse 
deleteUrlString空删除图片时的请求路径
deleteExtraDataObject{}删除图片时额外传入的参数
overwriteInitialBooleantrue 
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’}, 
preferIconicPreviewBooleanfalse 
preferIconicZoomPreviewBooleanfalse 
allowedPreviewTypesundefinedundefined 
allowedPreviewMimeTypesObjectnull 
allowedFileTypesObjectnull接收的文件后缀，如[‘jpg’, ‘gif’, ‘png’],不填将不限制上传文件后缀类型
allowedFileExtensionsObjectnull指出带有哪些后缀名的文件才是被接受上传的，设置msgInvalidFileExtension可以个性化出现此错误时的错误信息
defaultPreviewContentObjectnull 
customLayoutTagsObject{} 
customPreviewTagsObject{} 
previewFileIconString空当文件无法被预览时出现在缩略图中的图标，默认是
previewFileIconClassString‘file-other-icon’ 
previewFileIconSettingsObject{}可以将不同的后缀的文件有不同的缩略图图标
previewFileExtSettingsObject{} 
buttonLabelClassString‘hidden-xs’ 
browseIconString空 
browseClassString‘btn btn-primary’指出了右下角选择按钮的样式。一般尽量不要用btn-sm和btn-lg，会和左边的输入框不协调
removeIconString空删除按钮相关的属性
removeClassString‘btn btn-default’ 
cancelIconString空 
cancelClassString‘btn btn-default’ 
uploadIconString空上传按钮相关的属性
uploadClassString‘btn btn-default’ 
uploadUrlStringnull上传文件路径
uploadAsyncbooleantrue是否为异步上传
uploadExtraDataObject{}上传文件时额外传递的参数设置
zoomModalHeightnumber480 
minImageWidthStringnull图片的最小宽度
minImageHeightStringnull图片的最小高度
maxImageWidthStringnull图片的最大宽度
maxImageHeightStringnull图片的最大高度
resizeImageBooleanfalse 
resizePreferenceString‘width’ 
resizeQualitynumber0.92 
resizeDefaultImageTypeString‘image/jpeg’ 
minFileSizenumber0单位为kb，上传文件的最小大小值
maxFileSizenumber0单位为kb，如果为0表示不限制文件大小
resizeDefaultImageTypenumber25600(25MB) 
minFileCountnumber0表示同时最小上传的文件个数
maxFileCountnumber0表示允许同时上传的最大文件个数
validateInitialCountBooleanfalse 
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” 
progressUploadThresholdnumber99 
previewFileTypeString‘image’预览文件类型,内置[‘image’, ‘html’, ‘text’, ‘video’, ‘audio’, ‘flash’, ‘object’,‘other‘]等格式
elCaptionContainerStringnull 
elCaptionTextStringnull设置标题栏提示信息
elPreviewContainerStringnull 
elPreviewImageStringnull 
elPreviewStatusStringnull 
elErrorContainerStringnull 
errorCloseButtonString×’ 
slugCallbackfunctionnull选择后未上传前 回调方法
dropZoneEnabledBooleantrue是否显示拖拽区域
dropZoneTitleClassString‘file-drop-zone-title’拖拽区域类属性设置
fileActionSettingsObject{}设置预览图片的显示样式
otherActionButtonsString空编码设置
textEncodingString‘UTF-8’ 
ajaxSettingsObject{} 
ajaxDeleteSettingsObject{} 
showAjaxErrorDetailsBooleantrue

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) {});
fileresetPossible 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 清除方法 清除所有文件

相关文章：