介绍
通过本文，你可以学习到如何封装或者开发一个前端组件，同时学习Bootstrap-fileinput组件的使用，封装后使用更加简单方便。
BaseFile是AdminEAP框架中基于Bootstrap-fileinput的附件上传组件，它支持 支持多文件、在线预览、拖拽上传等功能，封装后BaseFile主要包括以下功能：
- 弹出窗口的附件上传
- 当前界面的附件上传
- 显示附件明细
- 可编辑的附件明细（删除、预览、不可新增）
关于Bootstrap-fileinput的API文档可参考http://plugins.krajee.com/file-input
本文源码已在AdminEAP框架（一个基于AdminLTE的Java开发平台）中开源，可在Github下载相关代码：
Github：https://github.com/bill1012/AdminEAP
AdminEAP官网：http://www.admineap.com
使用说明
1、初始化
如果需要在当前界面使用附件上传功能（非弹窗方式）则需要在头部引入相关的css和js文件
css文件
<link rel="stylesheet" href="./resources/common/libs/fileinput/css/fileinput.min.css" rel="external nofollow" ></div>
js文件
<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></div>
form表单上还需要配置enctype="multipart/form-data"属性
2、弹窗方式调用
BaseFile支持弹窗方式打开一个附件上传窗口，点击附件上传后，弹出窗口，上传附件关闭窗口后，上传的附件在type=file的控件回填。
在表单中点击弹窗上传附件：
上传完毕，关闭窗口，附件回填
再次打开上传附件上传窗口时，会把已有的附件回填到附件上传窗口。
配置如下：
html代码
<input type="hidden" name="fileIds" id="fileIds">
<div class="form-group">
<div class="btn btn-default btn-file" id="uploadFile">
<i class="fa fa-paperclip"></i> 上传附件(Max. 10MB)
</div>
</div>
<div class="form-group" id="file_container">
<input type="file" name="file" id="attachment">
</div>
</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
});
}
});
</div>
3、本地界面调用
本地界面调用附件上传，如下图所示：
将上传附件嵌入到当前界面方式
上传后的附件可删除、可预览
（目前图片文件可预览，其他文件不可预览，后期将集成txt/xml/html/pdf的预览功能）
配置如下：
html代码
<div class="form-group" id="file_container"> <input type="file" name="file" id="attachment"> </div></div>
js代码
$("#attachment").file({
fileinput: {
maxFileSize: 10240,
maxFileCount:3
},
fileIdContainer:"[name='fileIds']",
window:false
});
</div>
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源码
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>',
previewFileIconSettings: null,
slugCallback: function (text) {
var newtext=(!text||text=='') ? '' : String(text).replace(/[\-\[\]\/\{}:;#%=\(\)\*\+\?\\\^\$\|<>&"']/g, '_');
//去除空格
return newtext.replace(/(^\s+)|(\s+$)/g,"").replace(/\s/g,"");
}
}
}
</div>
5、BaseFile控件源码
/**
* 通用文件管理组件
* @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方法，则该方法会失效，因为不是一个页面了
options.container = options.container || this.element.selector.replace("#", "");
//初始化文件图标信息
this.getFileIconSettings();
this.options = $.extend(true, {}, this.default, options);
//初始化图标信息
this.initFileIds();
if(this.options.window) {
this.element.click(function () {
$(this).data('file').openWin();
});
}else{
//非弹窗形式
if(this