使用AJAX和按钮提交的烧瓶上传文件不起作用

Question

我试图用bootstrap实现文件上传（ .csv ），然后使用按钮提交。

我尝试了多种不同的方法来实现文件上传，但到目前为止，这些方法都不起作用，我似乎无法指出问题所在：

<form method="POST" enctype="multipart/form-data" id="excel-upload" name="file">
      <div class="file-upload-wrapper">
               <label for="file">Upload Excel DAT File</label>
                     <input type="file" name="excel-upload-file" class="form-control-file" id="excel-upload-file">
                         <button class="btn btn-outline-success" type="button" id="submit_table" method="POST" style="margin-top: 30px">
                     <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" id = "loading_spinner_table"></span>
                                        Submit File
                                </button>
                            </div>
                        </form>

$("#submit_table").on('click', function(e) {
        e.preventDefault();
        $("#loading_spinner_table").show();
        let form_data = new FormData($('#excel-upload-file')[0]);
        console.log(form_data);
        $.ajax({
            url: "/upload_excel",
            type: "POST",
            data: form_data,
            contentType: false,
            cache: false,
            processData: false,
            success: function(data) {
                console.log(data)
                $("#loading_spinner_table").hide();
                Plotly.plot('table_data',data);
            },
            error: function(result) {
                $("#loading_spinner_table").hide();
                alert("Invalid Submission / No Data");
            }
        });
    });

@app.route('/upload_excel', methods=['POST', 'GET'])
def upload_blob():
    if request.method in ('POST','GET'):
        print(request.files)
        if 'file' not in request.files:
            print('NO FILE')
            flash('No file part')
            return redirect(request.url)
        file = request.files['file']
        if file.filename == '':
            print('NOTHING SELECTED')
            flash('No file selected for uploading')
            return redirect(request.url)
        if file and allowed_file(file.filename):
            filename = secure_filename(file.filename)
    """ Additional processing"""

Answer 1

我们在MVC中遇到了同样的问题，我们将按钮更改为**输入类型**提交****，然后它起作用了。 按钮不适用于表单提交

Answer 2

需要进行一些更改。

FormData API需要采用表单，而不是表单元素。 将构建对象的行更改为此： let form_data = new FormData($('#excel-upload')[0]);

接下来，您的ajax调用需要指定您正在使用多部分表单编码。 将此参数添加到调用中： enctype: 'multipart/form-data'

第三，您要在服务器端使用的文件密钥将与form元素的名称匹配。 在这种情况下，您要查找request.files['excel_upload_file']

看起来这段代码是从flask文件上传教程中提取的，因此，我假设您已经设置了flask以处理上传。