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