若依bootstrap-fileinput显示下载按钮,实现下载

关于"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,//是否显示移除按钮

运行查看发现预览的附件中有下载按钮了,配置的路径正确就可以点击下载附件了

若依bootstrap-fileinput显示下载按钮,实现下载_第1张图片

你可能感兴趣的:(bootstrap,前端,javascript,html5)