Python flask使用ajax上传文件的示例代码

前言

JS

为什么要用ajax来提交
在使用from提交时，浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名。

为安全起见，即file-upload 元素不允许 HTML 作者或 JavaScript 程序员指定一个默认的文件名。HTML value 属性被忽略，并且对于此类元素来说，value属性是只读的，这意味着只有用户可以输入一个文件名。当用户选择或编辑一个文件名时，file-upload 元素触发 onchange 事件句柄。

利用form提交会导致页面刷新，体验不好，所以使用AJAX进行文件上传是个不错的选择。但这需要我们自己来组织通过POST请求发送的内容
FormData对象

通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据，因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ，则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同。 —— MDN web docs

Form的enctype属性

enctype这个属性管理的是表单的MIME编码，它一共有三个属性：

Input

MIME类型（更多直接百度，类型超乎你的想想）

上传单个文件

html代码部分

<form   id="uploadForm"  method="post" enctype="multipart/form-data">
 <label  >上传电子书</label>
 <input type="file"  name="file" >
 <button  id="upload" type="button"  name="button" >上传</button>
 </br>
 </br>
 </br>
</form>

javascript代码部分

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layer/3.5.1/layer.js "></script>
<script>
 $("#upload").click(function(){
 var formData = new FormData($('#uploadForm')[0]);
 $.ajax({
   type: 'post',
   url: "{{ url_for('.regression_report') }}", //上传文件的请求路径必须是绝对路劲
   data: formData,
   cache: false,
   processData: false,
   contentType: false,
   success:function(data){
     // 这里是访问成功时被自动执行的代码
     // 拆分返回值信息(具体返回什么东西就看视图函数中定义的json格式)
     status_ret = data.status;
     errmsg_ret = data.errmsg;
     layer.msg(errmsg_ret);
     switch (status_ret){
       case 0:
         setTimeout(function(){window.location.href = "{{ url_for('.regression_report') }}";},"2000");
         break
       default:
         setTimeout(function(){window.location.href = "{{ url_for('.regression_report') }}";},"2000");
         break
     }
   },
   error:function(jqXHR){
     // 这里是访问失败时被自动调用的代码
   }
 });
});
</script>

当你的页面样式比较多的时候，可能上述方法无法传入文件，下面这种方法比较强，推荐看看

<form class="info" method="post" enctype="multipart/form-data">
 <div class="form-group">
   <label>File upload</label>
   <input id="id_regression_html" type="file" name="regression_html" class="file-upload-default">
   <div class="input-group col-xs-12">
     <input type="text" class="form-control file-upload-info" disabled="" placeholder="Upload Regression.html">
     <span class="input-group-append">
       <button id="html_upload" class="file-upload-browse btn btn-gradient-primary" type="button">Html Upload</button>
     </span>
   </div>
 </div>
 <button id="id_ajax_submit" type="button" class="btn btn-gradient-primary mr-2">Submit</button>
</form>

<script src="https://cdn.bootcdn.net/ajax/libs/layer/3.5.1/layer.js "></script>
<script>
     $("#id_ajax_submit").click(function(){
     // var formData = new FormData($('#uploadForm')[0]);
     let formData = new FormData();
     let my_file = document.getElementById('id_regression_html');
     // @Param: <input name="regression_html">
     // @Param: myFile.file[0]为第一个文件（单选）,多个文件（多选）则要循环添加
     formData.append('regression_html',my_file.files[0]);

$.ajax({
           type: 'post',
           url: "{{ url_for('.regression_report') }}", //上传文件的请求路径必须是绝对路劲
           data: formData,
           cache: false,
           async: false,
           processData: false, //告诉jquery不要处理发送的数据
           contentType: false, //告诉jquery不要设置content-Type请求头
           success:function(data){
           // 这里是访问成功时被自动执行的代码
           // 拆分返回值信息(具体返回什么东西就看视图函数中定义的json格式)
           status_ret = data.status;
           errmsg_ret = data.errmsg;
           layer.msg(errmsg_ret);
           switch (status_ret){
               case 0:
                   setTimeout(function(){window.location.href = "{{ url_for('.regression_report') }}";},"2000");
                   break
               case 1:
                   setTimeout(function(){window.location.href = "{{ url_for('.regression_report') }}";},"2000");
                   break
               default:
                   setTimeout(function(){window.location.href = "{{ url_for('.regression_report') }}";},"2000");
                   break
               }
           },
           error:function(jqXHR){
             // 这里是访问失败时被自动调用的代码
           }
       });
   });
</script>

flask 视图函数部分

@admin_blu.route("/toolReg", methods=['GET', 'POST'])
def regression_report():
   if request.method == "GET":
       return render_template('index.html')
   elif request.method == "POST":
       # TODO： 获取设置
       # TODO： 获取文件
       f = request.files.get('file')
       if f and f.filename.__contains__('.html'):
           upload_path = os.path.join(current_app.root_path, 'static/upload/html', f.filename)            download_path = os.path.join(current_app.root_path, 'static/upload/html', 'xlsx')
           # TODO： 类实例化，同步执行
           f.save(upload_path)
           ret = {
               "status": 0,
               "errmsg": "上传成功"
           }
           return jsonify(ret)
       return redirect(url_for(".index.html"))

上传多个文件

html

<form id="uploadForm" enctype="multipart/form-data">
 <input type="file" name="file" multiple="multiple" />
</form>
<button id="btnUpload">上传文件</button>

js

<script>
 $("#btnUpload").on("click", function(){
 var formdata = new FormData($("#uploadForm")[0]);
 alert(formdata);
 $.ajax({
   type: "post",
   url: "/Attendance/UploadFile2/",//url地址
   contentType: false,
   cache: false,
   processData: false,
   data: formdata,
   success: function (data) {
     console.log(data);
   }
 });
});
</script>

出问题解决方案

//将formdata改用下面的方式试下
var formdata = new FormData();
var files = $("input[type='file']")[0].files;
for (var i = 0; i < files.length; i++) {
 formdata.append("file", files[i]);
}

来源：https://blog.csdn.net/qq_33704787/article/details/126003341