Skip to main content
 首页 » 编程设计

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

2025年04月02日43www_RR

所以我有一个带有几个输入文本字段的 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 错误请求

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

请您参考如下方法:

我找到了解决方案。

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

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