bootstrap fileinput插件使用

第一步：必然是下载并导入路径。我是通过csdn资源用积分下载的，如果有谁要可以留言，给你分享资源。

第二步：引用 css,js文件，路径改成你自己的相对路径

<!--上传附件插件-->
<script type="text/javascript" src="../bootstrap-fileinput/js/fileinput.min.js"></script>
<script type="text/javascript" src="../bootstrap-fileinput/js/locales/zh.js"></script>

第三步：前端页面添加input

<input id="upload" name="upload" multiple type="file" class="file-loading"
       data-browse-on-zone-click="true">

第四步：js文件初始化插件配置

$("#upload").fileinput({  //上传配置
    lang: 'zh',
    //showPreview: true, //显示预览按钮
    showUpload: true,  //显示上传按钮
    allowedFileExtensions: ["jpg", "png", "gif"],
    //maxFileCount: 2,  //最大附件数量
    //enctype: 'multipart/form-data',
    uploadAsync:true, //true同步上传，false异步上传
    uploadUrl: upload/XX, //这里特别提醒一下，我试过，这里只能是请求路径，不能是函数
    uploadExtraData: function () {  //额外的参数，后台通过request.form.get()获取
        return {id:1,app_id: 2,upload_id: $("#upload").attr("name")}
    }
}).on("fileuploaded", function (event, data, previewId, index) {  //回调函数
      //保存返回的文件名和路径
      console.log(data)
});

第五步：后台获取并存储文件

import os
from flask import, request
from werkzeug.utils import secure_filename
upload_id = request.form.get('upload_id')
file = request.files[upload_id]
# 你的存储路径
UPLOAD_FOLDER = "/"  
# 加了下面这个，就会获取不到中文的文件名
# filename = secure_filename(file.filename)
filename = file.filename
file.save(os.path.join(UPLOAD_FOLDER, filename))
return jsonify({ "file_path": UPLOAD_FOLDER + "/" + filename, "file_name": filename })

这里提示一下，返回格式必须要是Json格式的，否则会出现一下奇怪问题。

以上就是我的粗浅使用后总结。