Javascript AJAX不发布多字段表单

我尝试使用一个具有许多字段的表单，包括从表单填充的文件字段。发布表单时，它不包含任何数据。当附件：form_数据未包含时，该表单工作。它在提交常规字段之前工作，但是现在我整天都在尝试添加文件上传，但没有成功

我的表格如下：

<form class="form-horizontal" enctype="multipart/form-data">
                      <div class="form-group">
                        <label class="col-sm-2 control-label">Material Description</label>
                        <div class="col-sm-10">
                          {{ form2.description(placeholder='Material Description', class='form-control') }}
                        </div>
                      </div>
                      <div class="form-group">
                        <label class="col-sm-2 control-label">Cost</label>
                        <div class="col-sm-10">
                          {{ form2.cost(placeholder='Cost', class='form-control') }}
                        </div>
                      </div>
                      <div class="form-group">
                        <label class="col-sm-2 control-label">Quantity</label>
                        <div class="col-sm-10">
                          {{ form2.quantity(placeholder='Quantity', class='form-control') }}
                        </div>
                      </div>
                      <div class="form-group">
                        <label class="col-sm-2 control-label">Used</label>
                        <div class="col-sm-10">
                          {{ form2.used(placeholder='Used', class='form-control') }}
                        </div>
                      </div>
                      <div class="form-group">
                        <label class="col-sm-2 control-label">Supplier</label>
                        <div class="col-sm-10">
                          {{ form2.supplier(class='form-control') }}
                        </div>
                      <div class="form-group">
                        <label class="col-sm-2 control-label">Attachment</label>
                        <div class="col-sm-10">
                          {{ form2.attachment(class='form-control') }}
                        </div>
                      </div>
                        {{ form1.hidden_tag() }}             
                      <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                          <button id="materialsButton" type="submit" class="btn btn-default">Add Materials</button>
                        </div>
                      </div>
                    </form>

我认为罪魁祸首是我的JS/jQuery：

$('#materialsButton').click(function (e) {
                var form_data = new FormData($('#attachment')[0]);
                $.ajax({
                    type : "POST",
                    dataType :"json",
                    url : "/api/submit_materials",
                    data : { 
                            workorder_id : data.workorder_id,
                            description : $('#description').val(),
                            cost : $('#cost').val(),
                            quantity : $('#quantity').val(),
                            used : $('#used').val(),
                            supplier : $('#supplier').val(),
                            attachment : form_data,
                    },
                    contentType : false,
                    cache : false,
                    processData : false,
                    success: function (data) {
                        if (data.error) {
                        $("#errorAlert").text(data.error).show();
                        $("#successAlert").hide();
                        }
                     else {
                        $("#successAlert").text(data.quantity + ' of ' + data.materials + ' successfully added to workorder MCI' + data.workorder_id + '. You may submit additional materials or hours below.').show();
                        $("#errorAlert").hide();
                        $("#materialsForm").trigger("reset");
                        $("#hoursForm").fadeIn("slow");
                     }
                    }
                });
                e.preventDefault();

---

为了节省空间，这只是整个JS脚本的一部分。

在ajax请求中使用formdata对象时，数据字段必须是formdata对象

            $.ajax({
                ...
                data : form_data,
                ...
            });

此外，formdata构造函数采用表单而不是字段

var form_data = new FormData(this.form);

这将把表单中的所有字段添加到formdata对象中，然后对其余的数据使用append

form_data.append('workorder_id', data.workorder_id);

---

在发送到服务器端之前，必须序列化formData。为表单设置一个id

<form class="form-horizontal" enctype="multipart/form-data" id="matarialsForm">

---

哦，好吧，这更有意义。对于workorder_id，在呈现页面时会从服务器传递值，这就是其语法不同的原因。其他每个字段都接受用户输入，这就是为什么使用$'description'.val.获取这些字段的原因，。在追加时，如示例中所示，将表单数据赋给正确字段时，正确的语法是什么。它将是form_data.append'description'，data.description；或者类似于form_data.append'description'，$'description.val？它将是形式_data.append'description'，$'description'.val；但在这种情况下，它是不必要的，因为当您将表单传递给构造函数时，我认为所有表单字段都是addedexcept按钮；表格中没有的数据呢。这也不适用于文件。

<form class="form-horizontal" enctype="multipart/form-data" id="matarialsForm">

$('#materialsButton').click(function (e) {
    e.preventDefault();
    var formData = new FormData();
    var stringData = $('#matarialsForm form').serializeArray();
    $.each(stringData,function(key,input){
            formData.append(input.name,input.value);
    });
                $.ajax({
                    type : "POST",
                    dataType :"json",
                    url : "/api/submit_materials",
                    data : formData
                    contentType : false,
                    cache : false,
                    processData : false,
                    success: function (data) {
                        if (data.error) {
                        $("#errorAlert").text(data.error).show();
                        $("#successAlert").hide();
                        }
                     else {
                        $("#successAlert").text(data.quantity + ' of ' + data.materials + ' successfully added to workorder MCI' + data.workorder_id + '. You may submit additional materials or hours below.').show();
                        $("#errorAlert").hide();
                        $("#materialsForm").trigger("reset");
                        $("#hoursForm").fadeIn("slow");
                     }
                    }
                });