Python flask使用ajax上傳檔案的範例程式碼

<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>

<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>

@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"))

<form id="uploadForm" enctype="multipart/form-data">
  <input type="file" name="file" multiple="multiple" />
</form>
<button id="btnUpload">上傳檔案</button>

<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]);
}