最近处理 bootstrap fileinput 附件上传 涉及附件下载问题,经过各种查询整合之后实现功能,整理文章免得以后忘记。实现效果如图1
图1
附件显示下载按钮实现分两步。
第一步:就是修改fileinput.js源码,目的是为了实现下载和上传达到互斥目的,具体实现在fileinput.js源码中搜索otherButtons找到类似图片的代码加入,如下图2所示:
图2
第一步内容参考(摘自)下面链接https://blog.csdn.net/jrn1012/article/details/61467367
第二步:参考bootstrap fileinput 提供的api,具体内容分为两小步:
1、添加下载属性按钮如图3所示:
图3
2、添加下载按钮对应的点击事件如图4所示:
图4
第二步内容参考(摘自)下面链接http://www.bootstrap-fileinput.com/options.html
注释:{dataKey}:将替换为initialPreviewConfig中设置的密钥。
其中涉及的到的三部分代码为:
1、 fileinput.js源码部分代码 :
if(showUpl){
otherButtons='';
}
2、配置自定义属性
var btns = '<button type="button" class="kv-cust-btn btn btn-sm btn-default" title="Download" "{dataKey}">' +
'<i class="glyphicon glyphicon-download"></i>' +
'</button>';
$('#input-id').fileinput({otherActionButtons: btns,// configure other plugin settings});
3、自定义属性添加点击事件
$('.kv-cust-btn').on('click', function() {
var $btn = $(this),
key = $btn.data('key');
});