bootstrap fileinput 显示下载按钮

关于"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这个函数,仔细看这个方法中的内容,

image.png

你会发现我标红的三行代码,一个是判断是否有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: ''  // 重试图标
                }
            })

完成后的效果


image.png

你可能感兴趣的:(bootstrap fileinput 显示下载按钮)