bootstrap-fileinput 中文文档: http://www.mianshigee.com/tutorial/ruoyi/spilt.7.9d13d5720da9d371.md
表格引用与上文,但是对一些参数进行补充说明:Options 参考如下
属性 | 类型 | 默认值 | 描述 |
---|---|---|---|
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 |
了解了基础属性后,了解下方法:事件Event说明。
方法名 | 描述 |
---|---|
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 清除方法 清除所有文件
如果要自定义方法 在FILEINPUT 下级定义任意方法 即可。_标识内部使用方法,没有_表示公开方法,当然内部方法也可以使用,但是不建议直接使用。
fileManager 保存的是选择上传或未上传的图片资源
清除initpreview的方法:清除previewCache.data.content 即可
获取FILEINPUT对象的方法 $("#inputid").data("fileinput") 获取。
$(this).data("fileinput").previewCache.data.content=[];
previewCache 存储初始化预览的数据包括配置文件在 data里面
previewCache.unset(index)在缓存中删除指定索引数据 页面需要另外更新
initialPreviewConfig的作用是为preview补充说明 例如通过title字段 可以绑定到页面上方便识别
页面样式的初始化都是通过模板,具体可以查看代码_initTemplateDefaults 里面对所有模板进行了定义,也可以在上面修改增加自定义的字段 属性 例如增加 data-key="{datakey}" 后面对模板初始化时候 获取对应的datakey值 对其绑定替换 参考 previewMarkupTags tTagBef1 和tTagBef2
tTagBef2 比tTagBef1 增加了title字段 通过replaceTags 方法将模板里面的字段批量替换
refresh 刷新方法用于options 更新使用 但是注意 此方法仅仅能更新同名属性 ,如果是数组则合并(相同的合并 不同的放到一起 取并集) 这里强调下 通过refresh 更新initpreview 实现初始化显示图片的方法不可行,如果想从新初始化 需要先清空 然后在通过refresh 方法绑定initpreview图片列表。
注意如原图片预览有3个图片 想通过如下代码让预览图片变为1个,结果事与愿违,如果与原图片都不一样则实际显示4个 如果有重复则显示3个 无法显示1个 需要先清除reset 然后如下操作:
$("#kv-explorer").fileinput("refresh",{
initialPreview: [ "http://lorempixel.com/1920/1080/transport/1"] ,
initialPreviewConfig: [ {caption: "transport-1.jpg", size: 329892, width: "120px", url: "{$url}", key: 1} ]
});
获取当前fileinput里面预览图片数量:$("#kv-explorer").fileinput('getFilesCount',bool);
1、bool为true 标识和initpreview算在内的所有图片数量 编辑时候判断好用
通过样式$(".file-preview-thumbnails").find('.file-preview-frame').length / 2;获取数量
2、bool为false 标识不包含初始化图片数量 用于知道当前预览上传选择的图片数量
研究源码的初衷目的是发现 删除预览和删除新上传在fileremoved 获取的 key参数不一致无法更新存储的input 图片列表数据,相同步单文件删除功能需要改造。
改造第一项:在_init 方法里面 判断refreshMode是刷新方法 在else 复制上面的几行代码下来即可
在refresh前增加了previewClear方法 清除options上的init属性
查看代码 init初始化的预览对象(红色框内)与上传(绿色框内)命名规则不一致,另外新上传的图片名与我们上传后的文件名(重命名)不一致,不方便处理,导致如果客户删除一个图片后,无法从数据存储中同步删除,所以第一步想法就是要统一命名,最少改动方法 就是新上传的自动更新到initpreview里面 如果删除 则通过删除前事件处理图片。
1、批量选择完自动上传 2、修改如上代码 可以调用previewClear后refresh属性options (完成同步) 3删除前处理 在模板处 image选用tTagBef1 title 存放图片路径作为识别属性。 在preremove里面增加 ititle=$frame.attr('title'); 定义 并修改 self._raise('filepreremove', [id, ind,ititle]);增加ititle传参数,4通过preremove事件on接收ititle 处理服务器数据 至此完成编辑单图片删除同步程序 可能比较繁琐 后续研究代码优化
通过学习 源码还是要认真看下的,大神写的代码还是很多值得借鉴的,另外学习可以看到很多文章上面没有的属性理解 、方法、事件等,方便更加简单的使用组件,也可以按照自己想法自定义组件。 我个人认为组件有些功能还不是很完善。
附加:fileinput 自己是不支持拖拽的,需要引用RubaXa 的插件sortable.js 才只是拖拽排序,官方案例带有。