Bootstrap-fileinput简单实现下载功能

bootstrap-fileinput是一款非常优秀的HTML5文件上传插件，支持文件预览、多选等一系列特性。可以查看中文文档详细了解：

http://www.bootstrap-fileinput/

但是笔者有时候需要将文件上传之后经过处理后提供文件的下载功能，而网上的自定义下载按钮实现起来还是不够简单，因此笔者在这里提供一种十分简单的下载按钮的实现方法。

一、bootstrap-fileinput的使用

笔者这里就不详述，这里有一篇很优秀的使用介绍：

bootstrap-fileinput使用教程

二、下载按钮的实现

下载按钮实现的主要思路是在文件上传好了之后，将上传按钮替换成下载按钮即可，不需要再去另加下载按钮。

  1. 通过浏览器可以查到每个上传按钮的class都有一个kv-file-upload，因此我们可以通过这个class来控制要替换的按钮。但是要注意的是同一个上传按钮有两个button标签。


2. 当文件上传成功后会将后端的数据返回到该方法下，

这里的data参数是后端返回的数据，而index参数正是我们需要的。index参数是返回的是加载的文件的顺序，就是说如果前面的文件都上传完了，又重新加载并上传一个文件，那这个上传事件的index又回到0。
3. 因此我们可以通过js选择器来匹配是哪个文件的上传事件被点击了，匹配方法如下：

最后我们只要替换掉这两个被选中的标签即可。

4. 最后完整的代码如下：

<script>
    $(document).ready(function () {
        $("#kv-explorer").fileinput({
            'theme': 'explorer-fas',
            'uploadUrl': '#',
            overwriteInitial: false,
            initialPreviewAsData: true,
            showAjaxErrorDetails: false,
            showUpload: false,
        }).on("fileuploaded", function (event, data, previewId, index) {
            var upload = ".kv-file-upload:eq(" + 2 * index + "),.kv-file-upload:eq(" + (2 * index + 1) + ")";
            $(upload).replaceWith("<a class='kv-file-down btn btn-sm btn-default' download='' href='' title='Download file'><i class='\n" +
                "glyphicon glyphicon-download-alt'></i></a>");
        });
    });
</script>

更多推荐

Bootstrap-fileinput简单实现下载功能