jquery - Flask 文本和文件以相同的形式上传 - 结果为空字典

Question

所以我有一个带有几个输入文本字段的 HTML 表单，但现在我想在相同的表单中包含文件上传。

我在这里的其他帖子中看到，使用 FormData 对象可以为我完成这项工作。然而，当我实现它时，我在 Flask 中收到的字典是空的。

这是 HTML 表单。调用操作的按钮在表单之外 - 我使用 Ajax 处理它，因为我不想刷新页面。

<form action="{{ url_for('configure') }}" method="post" enctype="multiform/form-data" id="form_withtabs">
    <div class="row">
        <br>
        <div class="col-lg-2">
            <label>
                <input type="text" id="input_username" name="username" class"form-control" placeholder="Username" >
            </label>
        </div>
        <div class="col-lg-2">
            <label>
                <input type="password" name="password" class"form-control" placeholder="Password" />
            </label>
        </div>
        <div class="col-lg-3">
            <input class="pull-right" type="text" name="project_name" data-toggle="tooltip" data-placement="left" title="Select a name for the project" placeholder="Project Name" />
        </div>
        <div class="col-lg-5">
            <input type="file" name="config_file" class="pull-right" />
        </div>
    </div>
</form>

        var thisformData = new FormData($('#form_withtabs'));

        $.ajax({
            url: "/configure",
            data: thisformData,
            type: 'POST',
            contentType: false,
            cache: false,
            processData: false,
            async: false,
            success: function(response) {
                var $link_addr = $(response).filter('#link').html();
                $('body').removeClass("loading");
                $(".alert-danger").html($link_addr);
                $(".alert-danger").show();
                return true;
            }

这是处理请求的函数。

@app.route('/configure', methods=['POST'])
def configure():
    print request.form
    if request.method == 'POST':
        #request the file from 
        file = request.files['config_file']
        if file:
            filename = secure_filename(file.filename)
            #app.config["UPLOAD_FOLDER"] is defined in flask_define.py
            file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))

我按下提交得到的结果是

ImmutableMultiDict([])

和400 错误请求

有人可以帮我找出我的错误吗？

Answer 1

我找到了解决方案。

而不是使用 var thisformData = new FormData($('#form_withtabs'));

我尝试使用 var form = document.querySelector('#form_withtabs');
var formData = new FormData(表单);
最后解决了我的问题，Flask 现在收到了一切。