通过本文，你可以学习到如何封装或者开发一个前端组件，同时学习Bootstrap-fileinput组件的使用，封装后使用更加简单方便。
BaseFile是AdminEAP框架中基于Bootstrap-fileinput的附件上传组件，它支持 支持多文件、在线预览、拖拽上传等功能，封装后BaseFile主要包括以下功能：
弹出窗口的附件上传
当前界面的附件上传
显示附件明细
可编辑的附件明细（删除、预览、不可新增）
关于Bootstrap-fileinput的API文档可参考
本文源码已在AdminEAP框架（一个基于AdminLTE的Java开发平台）中开源，可在Github下载相关代码：
Github：https://github.com/bill1012/AdminEAP
使用说明
1、初始化
如果需要在当前界面使用附件上传功能（非弹窗方式）则需要在头部引入相关的css和js文件
css文件
<link href="https://www.jb51.net/article/resources/common/libs/fileinput/css/fileinput.min.css" >
js文件
<script src="https://www.jb51.net/article/resources/common/libs/fileinput/js/fileinput.js"></script> <script src="https://www.jb51.net/article/resources/common/libs/fileinput/js/locales/zh.js"></script> <!--BaseFile组件--> <script src="https://www.jb51.net/article/resources/common/js/base-file.js"></script>
form表单上还需要配置enctype="multipart/form-data"属性
2、弹窗方式调用
BaseFile支持弹窗方式打开一个附件上传窗口，点击附件上传后，弹出窗口，上传附件关闭窗口后，上传的附件在type=file的控件回填。
在表单中点击弹窗上传附件：
上传完毕，关闭窗口，附件回填
再次打开上传附件上传窗口时，会把已有的附件回填到附件上传窗口。
配置如下：
html代码
<input type="hidden"> <div> <div> <i></i> 上传附件(Max. 10MB) </div> </div> <div> <input type="file"> </div>
js代码
$("#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 }); } });
3、本地界面调用
本地界面调用附件上传，如下图所示：
将上传附件嵌入到当前界面方式
上传后的附件可删除、可预览
（目前图片文件可预览，其他文件不可预览，后期将集成txt/xml/html/pdf的预览功能）
配置如下：
html代码
<div> <input type="file"> </div>
js代码
$("#attachment").file({ fileinput: { maxFileSize: 10240, maxFileCount:3 }, fileIdContainer:"[name='fileIds']", window:false });
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只能显示，不能删除