引言

最近在做毕设的过程中，发现自己的上传视频的页面，竟然比不上某个阿猫阿狗，于是在一番搜索之下终于找到了boostrap-fileinput这个插件

Github官方: https://github.com/kartik-v/bootstrap-fileinput
知乎教程：https://zhuanlan.zhihu.com/p/23908279

基本使用

导入

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<!-- 原生css和javascript -->
<link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.2.7/css/fileinput.min.css" media="all"
    rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.2.7/js/fileinput.min.js"></script>
<!-- 中文支持 -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.2.7/js/locales/LANG.js"></script>

<!-- 图标 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.min.css"
    crossorigin="anonymous">

最简使用方式，先设置一个input，然后给与其一个id，通过jquery进行初始化

1
2
3
4
5
6
7


<input id="input-id" name="file-data" type="file">

<script>
$(document).ready(function () {
  $("#input-id").fileinput();
});
</script>

参数

多文件上传，加入multiple参数

1

<input id="input-id" name="file-data" type="file" multiple class="file-loading">

fileinput初始化参数

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


$("#input-id").fileinput({
    'uploadUrl': 'api/upload', 
    // 如果加上是ajax上传方式，一个图片为一个post请求
    // 如果去掉是form上传方式，整个表单为一个post请求
    'allowedFileExtensions' : ['jpg', 'png', 'mp4'], // 接收的文件后缀
    'previewFileType': ['jpg', 'mp4'], // 预览文件类型
    'dropZoneEnabled': true, // 拖拽区域是否显示
    'language': 'zh', // 语言
    'showUpload': false, // 显示上传按钮
    'maxFileCount': 3, // 最大文件个数
    'minFileCount': 3, // 最少文件个数
});

一个表单

在毕设的过程中，我需要将上传框和文字框放在一起，组成一个表单，点击提交时进行图片的上传与表单的提交。

表单示例：

1
2
3
4
5
6
7


<form action="" method="POST" enctype="multipart/form-data">
    <div style="padding: 100px 50px;">
        <input id="input-id" name="file-data" type="file" multiple class="file-loading">
        <input type="text" name="name">
    </div>
    <button id='submit' type="submit" class="btn btn-primary btn-block">提交</button>
</form>

javascript做法

1
2
3
4
5
6
7
8


$("#input-id").fileinput({
    'showUpload': false, // 这里要去掉显示按钮
});

// 点击submit按钮后进行图片的上传
$("#submit").on("click", function () {
    $("#input-id").fileinput('upload');
});

flask后端做法

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


def index():
    if request.method == "GET":
        return render_template('upload.html')
    else:
        form = request.form
        print("form", form)
        files = dict(request.files.lists())     # 注释(1) 
        datas = files['file-data']
        # datas 是一个list，[img1, img2, img3]
        for file in datas:
            print(file)
        return "上传成功"

这里需要注意一下，前端给后端返回中的表单中并不会包含图片、视频等文件信息，需要使用request.file才能看到文件信息。注释(1)的意思是，把一个多值字典转换成单值字典，下面是例子

1
2
3
4
5


# 原始 
ImmutableMultiDict([('extension', 'pdf'), ('extension', 'doc')])

# 转换后
{'extension': ['pdf', 'doc']}

其他好用插件

Boostrap标签页插件
消息提示框插件 toastr.js教程1 教程2

Boostrap Fileinput插件使用

引言

基本使用

参数

一个表单

其他好用插件

相关文章：