BootStrap-FileInput 的基本使用

发表于 更新于 分类于 阅读次数： Disqus： 本文字数： 328 阅读时长 ≈ 1 分钟

安装与引入

在引入 File Input 之前首先需要下载下列文件：

1
2
3
bootstrap-fileinput/css/fileinput.min.css
bootstrap-fileinput/js/fileinput_locale_zh.js
bootstrap-fileinput/js/fileinput.min.js

上述文件可以在 File Input 的项目地址找到。 在下载好之后就需要添加如下代码进行引入：

1
2
3
<link href="/static/css/fileinput.min.css" rel="stylesheet">
<script src="/static/js/fileinput.min.js" type="text/javascript"></script>
<script src="/static/js/fileinput-zh.js" type="text/javascript"></script>

File Input 的使用

首先需要在页面添加一个 File Input 控件：

1
2
3
4
<div class="form-group">
    <input id="import_file" type="file" multiple class="file" name="userfile"
           data-overwrite-initial="false" data-min-file-count="1">
</div>
  • data-min-file-count 可以设定最少上传的文件数

在添加完之后就需要对控件进行初始化：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$("#import_file").fileinput({
    uploadUrl: "/upload_file", //设置上传的地址
    allowedFileExtensions: ['xls', 'xlsx'], //设置允许上传的文件格式
    overwriteInitial: false,
    language: 'zh', //设置语言
    maxFileSize: 6000,
    maxFilesNum: 10, //允许上传的最大文件数
    uploadAsync: true, //默认异步上传
    //allowedFileTypes: ['image', 'video', 'flash'],
    allowedPreviewTypes: null,
    previewFileIconSettings: {
        'xls': '<i class="fa fa-file-excel-o text-success"></i>'
    }, //预览文件的图标设置
    previewFileExtSettings: {
        'xls': function (ext) {
            return ext.match(/(xls|xlsx)$/i);
        }
    }, //xls 和 xlsx 使用同一预览
    slugCallback: function (filename) {
        return filename.replace('(', '_').replace(']', '_');
    } //使用回调功能将文件名转换成处理之后的文件名。
});

后台处理：

1
2
3
4
5
6
7
8
9
10
@app.route('/upload_file', methods=['POST'])
def upload_file():
    try:
        file = request.files.get('userfile')
        save_file_name = file.filename
        file.save(save_file_name)
    except KeyError:
        return []
    else:
        return jsonify({'info': "上传成功"})
  • 这里对上传的 Excel 文件进行了保存，返回上传成功的信息。

问题

  1. 在对 Excel 文件进行预览图标设置之前，如果通过按钮选择文件而不是拖拽，则会出现由预览文件所导致卡顿，在将 Excel 文件的预览设置为图标之后解决。
  2. 从后端直接返回字符串出现错误，改为返回 Json 格式数据后解决。

参考资料

  1. File Input 开发文档
  2. File Input Demo