关于"bootstrap fileinput"获取服务器上的文件信息,然后在控件中进行显示,并且显示下载按钮。就这个功能,耗费了我很长时间来研究这个控件,现在将解决方法记录一下。
网上有很多方法,我不能说我的方法是一定正确的,但是在修改源码的过程中,我阅读了一下源码,发现可以通过设置相关的属性来显示下载按钮,特此记录!
网络上的方法(可行)
https://www.jianshu.com/p/4bd0e1b6d15a
我的方法
首先,获取从服务器获取到的文件列表,并设置“bootstrap fileinput”的initialPreview和initialPreviewConfig这两个属性。
上述的两个属性怎么来的呢?首先,我们在fileinput.js这个文件里面,找到_renderFileActions方法,网络上的方法就是让你添加
if(showUpl){
otherButtons = '';
}
这样的代码来进行判断.但是,我们看_renderFileActions方法,
_renderFileActions: function (
cfg,
showUpl,
showDwn, //看这个属性
showDel,
showZoom,
showDrag,
disabled,
url,
key,
isInit,
dUrl,
dFile
)
看到没有,人家明明有showDwn这个属性,为什么不直接用呢?然后我们在fileinput中设置showDownload: true,发现并不其作用,为什么呢?然后接着看哪些地方调用了_renderFileActions方法,然后我们从源码的一开始进行查找,会发现footer: function这个函数,仔细看这个方法中的内容,
你会发现我标红的三行代码,一个是判断是否有showDownload这个设置,还有就是,你的配置信息中是否有dowmloadUrl这个属性,如果都有,那么sDwl就是true,缺失任何一个就是false;
showDownload可以直接在初始化fileinput的时候设置,那么dowmloadUrl在那设置呢?
这时,我们看config.downloadUrl这个,config指向的就是initialPreviewConfig的信息,现在问题迎刃而解。
看下面的代码!
//为initialPreviewConfig 配置数组
var initPrevConfig = new Array();
var imgUrls = new Array();
$(files).each(function (index,item) {
initPrevConfig[index] = {
caption: item.accessoryName, /*文件标题*/
size:Number(item.accessorySize),
downloadUrl: item.accessoryUrl, //这个是显示下载按钮的关键,如果没有此属性,下载按钮是不会显示的。
url: prefix +"/accessory/remove", /* 预览中的删除按钮的url*/
key: item.id, /* 删除时ajax携带的参数*/
extra: {ids: item.id} /*删除文件携带的参数*/
};
imgUrls.push(item.accessoryUrl);
});
控件的设置
$("#accessory").fileinput({
overwriteInitial: true, // 覆盖初始预览内容和标题设置
showClose:false, //是否显示关闭按钮
showCancel:true, // 显示取消按钮
showCaption: false,
showZoom:true, // 显示预览按钮
dropZoneEnabled:false, // 是否可拖拽
showUpload: false,
browseLabel: '选择附件', // 浏览按钮内容
showRemove:false, // 显示移除按钮
hideThumbnailContent:true, // 是否隐藏文件内容
msgUploadEnd: '上传完成',
initialPreviewAsData: true,
showPreview: true,
initialPreview: imgUrls, //你的变量
initialPreviewConfig: initPrevConfig , //你的配置
fileActionSettings: { // 在预览窗口中为新选择的文件缩略图设置文件操作的对象配置
showRemove: true, // 显示删除按钮
showUpload: false, // 显示上传按钮
showDownload: true, // 显示下载按钮 (这个也很重要)
showZoom: false, // 显示预览按钮
showDrag: false, // 显示拖拽
removeIcon: '', // 删除图标
uploadIcon: '', // 上传图标
uploadRetryIcon: '' // 重试图标
}
})
完成后的效果