Bootstrap fileinput文件上传预览插件使用详解

介绍 通过本文，你可以学习到如何封装或者开发一个前端组件，同时学习Bootstrap-fileinput组件的使用，封装后使用更加简单方便。 BaseFile是AdminEAP框架中基于Bootstrap-fileinput的附件上传组件，它支持 支持多文件、在线预览、拖拽上传等功能，封装后BaseFile主要包括以下功能： 弹出窗口的附件上传 当前界面的附件上传 显示附件明细 可编辑的附件明细（删除、预览、不可新增） 关于Bootstrap-fileinput的API文档可参考-input 本文源码已在AdminEAP框架（一个基于AdminLTE的Java开发平台）中开源，可在Github下载相关代码： Github：https://github.com/bill1012/AdminEAP AdminEAP官网： 使用说明 1、初始化 如果需要在当前界面使用附件上传功能（非弹窗方式）则需要在头部引入相关的css和js文件 css文件 <link rel="stylesheet" href="./resources/common/libs/fileinput/css/fileinput.min.css" > js文件 form表单上还需要配置enctype="multipart/form-data"属性 2、弹窗方式调用 BaseFile支持弹窗方式打开一个附件上传窗口，点击附件上传后，弹出窗口，上传附件关闭窗口后，上传的附件在type=file的控件回填。 在表单中点击弹窗上传附件： 上传完毕，关闭窗口，附件回填 再次打开上传附件上传窗口时，会把已有的附件回填到附件上传窗口。 配置如下： html代码 js代码 3、本地界面调用 本地界面调用附件上传，如下图所示： 将上传附件嵌入到当前界面方式 上传后的附件可删除、可预览 （目前图片文件可预览，其他文件不可预览，后期将集成txt/xml/html/pdf的预览功能） 配置如下： html代码 js代码 4、控件参数说明 window 默认为true,弹窗方式打开 title window=true时配置，弹窗的标题，默认为“文件上传” width window=true时配置，弹窗的宽度，默认900 winId window=true时配置，弹出的id，默认为fileWin fileinput Bootstrap-fileinput的配置参数，会覆盖默认配置，比如允许上传哪种类型的附件allowedFileTypes，允许上传最大附件大小maxFileSize，允许上传附件的个数maxFileCount等，具体的配置参数可以查询Bootstrap-fileinput的API文档。 fileIdContainer 必须，上传后的附件id存储的位置，id以逗号分隔 showContainer window=true必须配置，文件上传后回填的区域，window=false时如不配置，则取base-file的初始对象 showType window=true配置，值为edit或者detail,edit表示回填后可对数据进行删除、预览，detail只能显示，不能删除 callback window=true配置，关闭附件上传的窗口后执行的回调函数（比如更新当前的文件列表），fileIds,oldfileIds两个参数分别是更新后文件ids和更新前的文件ids BaseFile默认配置，BaseFile的更多实现，请查看BaseFile源码 5、BaseFile控件源码 6、后端源码 总结 本文源码已在AdminEAP框架（一个基于AdminLTE的Java开发平台）中开源，可在Github下载相关代码： Github：https://github.com/bill1012/AdminEAP AdminEAP官网： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家