Bootstrap-fileinput自定义下载按钮

介绍

在上一篇文章中介绍了Bootstrap-fileinput组件的封装及使用，这篇文章延续上一篇文章，介绍了基于封装后的组件BaseFile中下载功能实现，也就是Bootstrap-fileinput中otherActionButtons中扩展自定义按钮。如下图所示：

实现步骤

1、修改fileinput.js源码

（fileinput.min.js也要相应修改），修改此处是为了在文件尚未上传时，下载按钮不显示，如下图所示：

2、配置下载按钮

在BaseFile文件中，配置下载otherActionButtons属性。

otherActionButtons:'<button type="button" class="kv-file-down btn btn-xs btn-default" {dataKey} title="下载附件"><i class="fa fa-cloud-download"></i></button>',

3、下载按钮事件绑定

在文件显示、上传文件成功，批量上传文件成功后绑定下载事件，每次把先解绑click事件后在绑定，防止重复绑定。

相关代码：

   BaseFile.prototype.showFiles=function(options){
        //此处省略一大堆代码
        //console.log("config=========="+JSON.stringify(config));
        fileComponet.fileinput('destroy');
        fileComponet.fileinput(config).on("filedeleted",function (event,key) {
            var newfids=self.deleteFileIds(key,self.options.fileIds);
            self.options.fileIds=newfids;
            self.updateFileIds();
        }).on("fileuploaded",function(event,data,previewId,index){
            var newfids=self.addFileIds(data.response.fileIds,self.options.fileIds);
            self.options.fileIds=newfids;
            self.updateFileIds();
            //otherActionButtons绑定事件 下载按钮绑定
            self.downloadHandler(this);
        }).on("filebatchuploadsuccess",function (event,data,previewId,index) {
            var newfids=self.addFileIds(data.response.fileIds,self.options.fileIds);
            self.options.fileIds=newfids;
            self.updateFileIds();
            //otherActionButtons绑定事件
            self.downloadHandler(this);
        }).on("filezoomhidden", function(event, params) {
            $(document.body).removeClass('modal-open');
            $(document.body).css("padding-right","0px");
        })
        this.downloadHandler(fileComponet);
    }


    /**
     * 其他按钮（如下载）绑定时间
     */
    BaseFile.prototype.downloadHandler=function(fileobj){
        if(!fileobj)
            fileobj=$(this.options.showContainer);
        var objs=$(fileobj).data('fileinput').$preview.find(".kv-preview-thumb .kv-file-down");
        objs.unbind("click");
        objs.on("click",function(){
           //点击下载
            window.location.href=basePath+"/file/download/"+$(this).data("key");
        });
    }

弹出窗口方式上传文件绑定下载事件类似，可在file_uploader.html中找到相关代码。

4、后台下载文件方法

  @RequestMapping(value="/download/{id}",method = RequestMethod.GET)
    public void downloadFile(@PathVariable("id") String id,HttpServletRequest request,HttpServletResponse response) throws IOException {
        SysFile sysfile = uploaderService.get(SysFile.class, id);

        InputStream is = null;
        OutputStream os = null;
        File file = null;
        try {
            // PrintWriter out = response.getWriter();
            if (sysfile != null)
                file = new File(request.getRealPath("/")+sysfile.getFilePath());
            if (file != null && file.exists() && file.isFile()) {
                long filelength = file.length();
                is = new FileInputStream(file);
                // 设置输出的格式
                os = response.getOutputStream();
                response.setContentType("application/x-msdownload");
                response.setContentLength((int) filelength);
                response.addHeader("Content-Disposition", "attachment; filename=\"" + new String(sysfile.getFileName().getBytes("GBK"),// 只有GBK才可以
                        "iso8859-1") + "\"");

                // 循环取出流中的数据
                byte[] b = new byte[4096];
                int len;
                while ((len = is.read(b)) > 0) {
                    os.write(b, 0, len);
                }
            } else {
                response.getWriter().println("<script>");
                response.getWriter().println(" modals.info('文件不存在!');");
                response.getWriter().println("</script>");
            }

        } catch (IOException e) {
            // e.printStackTrace();
        } finally {
            if (is != null) {
                is.close();
            }
            if (os != null) {
                os.close();
            }
        }
    }

总结

以上实现了Bootstrap-fileinput中自定义一个下载按钮，并绑定下载按钮事件的过程，以上过程完成的代码可在我的AdminEAP项目中找到源码：

Github地址：https://github.com/bill1012/AdminEAP
AdminEAP地址：http://www.admineap.com