最好用的文件上传插件 bootstrap fileInput

Bootstrap FileInput 组件使用

1、 下载插件

插件下载地址：https://github.com/kartik-v/bootstrap-fileinput/ 下载后的压缩包解压文件夹内容如下：

 

js ： 插件核心js代码，引用fileinput.min.js/fileinput.js即可，默认插件语言为英文，如需要中文需要引用js/locales/zh.js(其他语言引用相应的js文件)

js/plugins : 相关辅助插件，piexif.min.js（resize image插件）、sortable.js（初始化预览窗口缩略图排序插件）、purify.js（看说明是净化html代码用的，试了下没有搞明白具体有说明作用）

css ：插件核心css代码，fileinput.min.css/fileinput.css（核心css代码，引用任何一个）、fileinput-rtl.min.css/fileinput-rtl.css(选用这组css，文件选择框会和从右向左排列，即选择文件等相关按钮按钮在左边，文件框在右边)

themes:主题，如需要插件主题样式可引用主题文件夹下的相应js和css文件

查看示例：

打开压缩包中的example/index.html或者访问http://plugins.krajee.com/file-basic-usage-demo查看示例。可根据示例的代码选择需要的控件代码使用。

2、下载依赖

fileinput依赖于bootstrap 和 font-awesome，我们需要把这两个下载下来

bootstrap ：https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css

​ https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js

font-awesome：https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

3、引入相应js和css

注意引入顺序

 

<link href="../bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="../fileinput/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
<link href="../font-awesome/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css"/>
<link href="../fileinput/themes/explorer-fa/theme.css" media="all" rel="stylesheet" type="text/css"/>
    
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../fileinput/js/plugins/sortable.js" type="text/javascript"></script>
<script src="../fileinput/js/fileinput.js" type="text/javascript"></script>
<script src="../fileinput/js/locales/zh.js" type="text/javascript"></script>
<script src="../fileinput/themes/explorer-fa/theme.js" type="text/javascript"></script>
<script src="../fileinput/themes/fa/theme.js"></script>

4、创建上传组件

 

<div class="file-loading">
    <input id="input-ke-2" name="file" type="file" multiple>
</div>

5、定义fileinput

 

// 上传附件
    $("#input-ke-2").fileinput({
        language:'zh',                                          // 多语言设置，需要引入local中相应的js，例如locales/zh.js
        theme: "explorer-fa",                               // 主题
        uploadUrl: task_file_uplad_url,         // 上传地址
        minFileCount: 1,                                        // 最小上传数量
        maxFileCount: 5,                                        // 最大上传数量
        overwriteInitial: false,                        // 覆盖初始预览内容和标题设置
        showCancel:false,                                       // 显示取消按钮
        showZoom:false,                                         // 显示预览按钮
        showCaption:false,                                  // 显示文件文本框
        dropZoneEnabled:false,                          // 是否可拖拽
        uploadLabel:"上传附件",                         // 上传按钮内容
        browseLabel: '选择附件',                            // 浏览按钮内容
        showRemove:false,                                       // 显示移除按钮
        browseClass:"layui-btn",                        // 浏览按钮样式
        uploadClass:"layui-btn",                        // 上传按钮样式
        uploadExtraData: {'taskId':taskId,'createBy':userId,'createByname':username},   // 上传数据
        hideThumbnailContent:true,                  // 是否隐藏文件内容
        fileActionSettings: {                               // 在预览窗口中为新选择的文件缩略图设置文件操作的对象配置
            showRemove: true,                                   // 显示删除按钮
            showUpload: true,                                   // 显示上传按钮
            showDownload: false,                            // 显示下载按钮
            showZoom: false,                                    // 显示预览按钮
            showDrag: false,                                        // 显示拖拽
            removeIcon: '<i class="fa fa-trash"></i>',   // 删除图标 
            uploadIcon: '<i class="fa fa-upload"></i>',     // 上传图标
            uploadRetryIcon: '<i class="fa fa-repeat"></i>'  // 重试图标
        },

        initialPreview: [                                                                   //初始预览内容
            "https://picsum.photos/1920/1080?image=101",
            "https://picsum.photos/1920/1080?image=102",
            "https://picsum.photos/1920/1080?image=103"
        ],
        initialPreviewConfig: [                                                     // 初始预览配置 caption 标题，size文件大小 ，url 删除地址，key删除时会传这个
            {caption: "picture-1.jpg", size: 329892, width: "120px", url: task_file_delete_url, key: 101},
            {caption: "picture-2.jpg", size: 872378, width: "120px", url: task_file_delete_url, key: 102},
            {caption: "picture-3.jpg", size: 632762, width: "120px", url: task_file_delete_url, key: 103}
        ]
    });
    // 上传成功回调
    $("#input-ke-2").on("filebatchuploadcomplete", function() {
        layer.msg("上传附件成功");
        setTimeout("closeUpladLayer()",2000)
    });
    // 上传失败回调
    $('#input-ke-2').on('fileerror', function(event, data, msg) {
        layer.msg(data.msg);
        tokenTimeOut(data);
    });

6、效果如图

链接：https://www.jianshu.com/p/15e72207a461