关于"bootstrap fileinput"在预览文件,只能预览图片跟视频,其他文件则显示不了,摸索着这个看不到的文件能不能下载来看。现在将解决方法记录一下。
网上有很多方法,一般都是自定义下载按钮上去,在查看源码的过程中发现其实在本身的fileinput.js是有这个下载按钮的配置的,可以通过设置相关的属性来显示下载按钮
第一步:我们需要在页面中增加downloadUrl: ctx+files.filePath,这个属性,ctx+files.filePath为自己附件的路径
var initialPreviewUrlArr = [];
var initialPreviewConfigArr = [];
var annexs =[[${sdFileList}]];
console.log(annexs)
$.each(annexs, function (row, files) {
initialPreviewUrlArr.push(ctx+files.filePath);
var ext = files.fileName.substr(files.fileName.lastIndexOf('.') + 1);
var extType = 'object';
if (/(pdf)$/i.test(ext)) {
extType = 'pdf';
}
if (/(bmp|gif|jpg|jpeg|png)$/i.test(ext)) {
extType = 'image';
}
initialPreviewConfigArr.push({
type: extType,
caption: files.fileName,
filename: files.fileName,
url: ctx+'common/removeFile',//prefix+'/removeFile',
downloadUrl: ctx+files.filePath,
key: files.annexId
});
});
第二步:在这里增加showDownload: true,
$("#multipleFile1").fileinput({
dropZoneEnabled: false,
autoReplace: false,
overwriteInitial: true,
layoutTemplates: {
actionUpload: '',//去除上传预览缩略图中的上传图片
//actionZoom:'', //去除上传预览缩略图中的查看详情预览的缩略图标
//actionDownload:'' //去除上传预览缩略图中的下载图标
actionDelete: '', //去除上传预览的缩略图中的删除图标
},
showUploadedThumbs: false,
showCaption: false,//是否显示选择输入框
showClose: false,//是否显示关闭按钮
showUpload: false, //是否显示上传按钮
showDownload: true,
showBrowse: false,
showRemove: false,//是否显示移除按钮
运行查看发现预览的附件中有下载按钮了,配置的路径正确就可以点击下载附件了