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

矫情吗；* 2023-02-16 06:23 50阅读 0赞

# Bootstrap FileInput 组件使用 #

## 1、 下载插件 ##

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

![format_png][]

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][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_css_bootstrap.min.css]

[https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js][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][https_cdnjs.cloudflare.com_ajax_libs_font-awesome_4.7.0_css_font-awesome.min.css]

## 3、引入相应js和css ##

注意引入顺序

## 4、创建上传组件 ##

## 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、效果如图

![format_png 1][]

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

[https_github.com_kartik-v_bootstrap-fileinput]: https://github.com/kartik-v/bootstrap-fileinput/
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDAxNjM5My05NDg5MWQwNzI5MDdlNjZjLnBuZz9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93Lzc5OS9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[http_plugins.krajee.com_file-basic-usage-demo]: http://plugins.krajee.com/file-basic-usage-demo
[https_maxcdn.bootstrapcdn.com_bootstrap_4.0.0-beta_css_bootstrap.min.css]: 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]: https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js
[https_cdnjs.cloudflare.com_ajax_libs_font-awesome_4.7.0_css_font-awesome.min.css]: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDAxNjM5My05NjEwNTc4MDkyYzczOWNiLnBuZz9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzEyMDAvZm9ybWF0L3dlYnA?x-oss-process=image/format,png