在上一篇文章中介绍了Bootstrap-fileinput组件的封装及使用,这篇文章延续上一篇文章,介绍了基于封装后的组件BaseFile中下载功能实现,也就是Bootstrap-fileinput中otherActionButtons中扩展自定义按钮。如下图所示:
(fileinput.min.js也要相应修改),修改此处是为了在文件尚未上传时,下载按钮不显示,如下图所示:
在BaseFile文件中,配置下载otherActionButtons属性。
otherActionButtons:'<button type="button" class="kv-file-down btn btn-xs btn-default" {dataKey} title="下载附件"><i class="fa fa-cloud-download">i>button>',
在文件显示、上传文件成功,批量上传文件成功后绑定下载事件,每次把先解绑click事件后在绑定,防止重复绑定。
相关代码:
BaseFile.prototype.showFiles=function(options){
//此处省略一大堆代码
//console.log("config=========="+JSON.stringify(config));
fileComponet.fileinput('destroy');
fileComponet.fileinput(config).on("filedeleted",function (event,key) {
var newfids=self.deleteFileIds(key,self.options.fileIds);
self.options.fileIds=newfids;
self.updateFileIds();
}).on("fileuploaded",function(event,data,previewId,index){
var newfids=self.addFileIds(data.response.fileIds,self.options.fileIds);
self.options.fileIds=newfids;
self.updateFileIds();
//otherActionButtons绑定事件 下载按钮绑定
self.downloadHandler(this);
}).on("filebatchuploadsuccess",function (event,data,previewId,index) {
var newfids=self.addFileIds(data.response.fileIds,self.options.fileIds);
self.options.fileIds=newfids;
self.updateFileIds();
//otherActionButtons绑定事件
self.downloadHandler(this);
}).on("filezoomhidden", function(event, params) {
$(document.body).removeClass('modal-open');
$(document.body).css("padding-right","0px");
})
this.downloadHandler(fileComponet);
}
/**
* 其他按钮(如下载)绑定时间
*/
BaseFile.prototype.downloadHandler=function(fileobj){
if(!fileobj)
fileobj=$(this.options.showContainer);
var objs=$(fileobj).data('fileinput').$preview.find(".kv-preview-thumb .kv-file-down");
objs.unbind("click");
objs.on("click",function(){
//点击下载
window.location.href=basePath+"/file/download/"+$(this).data("key");
});
}
弹出窗口方式上传文件绑定下载事件类似,可在file_uploader.html中找到相关代码。
@RequestMapping(value="/download/{id}",method = RequestMethod.GET)
public void downloadFile(@PathVariable("id") String id,HttpServletRequest request,HttpServletResponse response) throws IOException {
SysFile sysfile = uploaderService.get(SysFile.class, id);
InputStream is = null;
OutputStream os = null;
File file = null;
try {
// PrintWriter out = response.getWriter();
if (sysfile != null)
file = new File(request.getRealPath("/")+sysfile.getFilePath());
if (file != null && file.exists() && file.isFile()) {
long filelength = file.length();
is = new FileInputStream(file);
// 设置输出的格式
os = response.getOutputStream();
response.setContentType("application/x-msdownload");
response.setContentLength((int) filelength);
response.addHeader("Content-Disposition", "attachment; filename=\"" + new String(sysfile.getFileName().getBytes("GBK"),// 只有GBK才可以
"iso8859-1") + "\"");
// 循环取出流中的数据
byte[] b = new byte[4096];
int len;
while ((len = is.read(b)) > 0) {
os.write(b, 0, len);
}
} else {
response.getWriter().println("");
}
} catch (IOException e) {
// e.printStackTrace();
} finally {
if (is != null) {
is.close();
}
if (os != null) {
os.close();
}
}
}
以上实现了Bootstrap-fileinput中自定义一个下载按钮,并绑定下载按钮事件的过程,以上过程完成的代码可在我的AdminEAP项目中找到源码:
Github地址:https://github.com/bill1012/AdminEAP
AdminEAP地址:http://www.admineap.com