⽂件上传预览插件Bootstrap-fileinput 组件封装及使⽤介绍
通过本⽂，你可以学习到如何封装或者开发⼀个前端组件，同时学习Bootstrap-fileinput 组件的使⽤，封装后使⽤更加简单⽅便。
BaseFile 是AdminEAP 框架中基于Bootstrap-fileinput 的附件上传组件，它⽀持 ⽀持多⽂件、在线预览、拖拽上传等功能，封装后BaseFile 主要包括以下功能：弹出窗⼝的附件上传当前界⾯的附件上传显⽰附件明细
可编辑的附件明细（删除、预览、不可新增）
本⽂源码已在AdminEAP 框架（⼀个基于AdminLTE 的开发平台）中开源，可在Github 下载相关代码：
使⽤说明
1、初始化
如果需要在当前界⾯使⽤附件上传功能（⾮弹窗⽅式）则需要在头部引⼊相关的css 和js ⽂件
css ⽂件
form 表单上还需要配置enctype="multipart/form-data"属性
2、弹窗⽅式调⽤
BaseFile ⽀持弹窗⽅式打开⼀个附件上传窗⼝，点击附件上传后，弹出窗⼝，上传附件关闭窗⼝后，上传的附件在type=file 的控件回填。<script src ="./resources/common/libs/fileinput/js/fileinput.js"></script ><script src ="./resources/common/libs/fileinput/js/locales/zh.js"></script ><!--BaseFile 组件--><script src ="./resources/common/js/base-file.js"></script >
1
2
3
4
在表单中点击弹窗上传附件：
上传完毕，关闭窗⼝，附件回填
再次打开上传附件上传窗⼝时，会把已有的附件回填到附件上传窗⼝。配置如下：
html代码
3、本地界⾯调⽤
本地界⾯调⽤附件上传，如下图所⽰：
将上传附件嵌⼊到当前界⾯⽅式
上传后的附件可删除、可预览
$("#uploadFile").file({ title: "请上传附件", fileinput: { maxFileSize: 10240, maxFileCount:3 }, fileIdContainer:"[name='fileIds']", showContainer:'#attachment', //显⽰⽂件类型 edit=可编辑 detail=明细 默认为明细 showType:'edit', //弹出窗⼝ 执⾏上传附件后的回调函数(window:false 不调⽤此⽅法) window:true , callback:function (fileIds,oldfileIds){ //更新fileIds this .showFiles({ fileIds:fileIds }); } });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
（⽬前图⽚⽂件可预览，其他⽂件不可预览，后期将集成txt/xml/html/pdf 的预览功能）配置如下：
html 代码
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 源码
$("#attachment").file({ fileinput: { maxFileSize: 10240, maxFileCount:3 }, fileIdContainer:"[name='fileIds']", window:false });
1
2
3
jquery弹出div窗口4
5
6
7
8
5、BaseFile 控件源码
BaseFile.prototype.default = { winId: "fileWin", width: 900, title: "⽂件上传", //通⽤⽂件上传界⾯ url: basePath + "/file/uploader", //默认⽀持多⽂件上传 multiple: true , //默认弹出附件上传窗⼝ window:true , showType:"detail", fileinput: { language: 'zh', uploadUrl: basePath + "/file/uploadMultipleFile", deleteUrl:basePath+"/file/delete", uploadAsync:false , validateInitialCount:true , overwriteInitial: false , allowedPreviewTypes: ['image'], previewFileIcon:'<i class="fa fa-file-o"></i>', previewFil
eIconSettings: null , slugCallback: function (text) { var newtext=(!text||text=='') ? '' : String (text).replace(/[\-\[\]\/\{}:;#%=\(\)\*\+\?\\\^\$\|<>&"']/g , '_'); //去除空格 return place(/(^\s+)|(\s+$)/g ,"").replace(/\s/g ,""); } } }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27/** * 通⽤⽂件管理组件 * @author billjiang qq:475572229 */(function ($, window, document, undefined) { 'use strict'; var pluginName = 'file'; $.fn[pluginName] = function (options) { var self = $(this ); if (this == null ) return null ; var data = this .data(pluginName); if (!data) { data = new BaseFile(this , $.extend(true , {}, options)); self.data(pluginName, data); } }; var BaseFile = function (element, options) { this .element = element; //extend 优先级 后⾯的会覆盖前⾯的 //alert(this.element.selector); //将容器ID 传过去便于弹窗获取到BaseFile 对象，如果页⾯布局不在使⽤jquery.load ⽅法，则该⽅法会失效，因为不是⼀个页⾯了 ainer = ainer || this .pla
ce("#", ""); //初始化⽂件图标信息 this .getFileIconSettings(); this .options = $.extend(true , {}, this .default, options); //初始化图标信息 this .initFileIds(); if (this .options.window) {1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论