FormData为空的问题？

Question

我似乎遇到了一个FormData为空的问题。我试图在单个POST请求中上传文件和JSON。我尝试了各种方法，但似乎都没有起作用。我想知道是否我在这里搞错了一些基本的东西，但我找不到任何问题。非常感谢你的帮助！

<form id="uploadCSVWithData" method="post" enctype="multipart/form-data">
    <div class="fileUpload btn btn-info">
        <i class="fa fa-cloud-upload" aria-hidden="true"></i>Upload CSV File <input type="file" name="csvUploadFile" class="upload" />
    </div>
    <input type="text" class="form-control" name="distName" id="distName"></br>
    <input type="text" class="form-control" name="columnNames" id="columnNames"></br>
    <input type="text" class="form-control" name="columnPrices" id="columnPrices"></br>
    <input type="text" class="form-control" name="columnCases" id="columnCases"></br>
    <input type="text" class="form-control" name="columnIds" id="columnIds">
</form>

还有JavaScript：

event.preventDefault();
var prices = $("#columnPrices").val();
var id = $("#columnIds").val();
var names = $("#columnNames").val();
var distName = $("#distName").val();
var cases = $("#columnCases").val();
var json = {
    columnPrices: prices,
    columnIds: id,
    columnNames: names,
    columnDistName: distName,
    columnCases: cases
}
var data = new FormData($("#uploadCSVWithData"));

console.log("Data is " + JSON.stringify(data))
$(this).html('<i class="fa fa-spinner fa-spin" aria-hidden="true">');
$.ajax({
    type: "POST",
    url: '{removed}',
    data: {
        json: json,
        formData: data
    },
    success: function(done) {
        $("#submitCSVForUpload").html("Submit");
        $("#uploadFromCSVModal").modal('hide');
    },
    processData: false,
    contentType: false
});

- Finn C

Answer 1

FormData在没有迭代的情况下无法使用console.log检查。

这里有一篇关于如何检查FormData的文章。

如果您想先在进行ajax请求之前console.log您的FormData对象，您可以按照以下步骤操作（我将结合您的代码使用来源文档中的示例）：

var form = $('#uploadCSVWithData')[0];
var data = new FormData(form);

// Display the key/value pairs
for(var pair of data.entries()) {
   console.log(pair[0]+ ', '+ pair[1]); 
}

- Dan Kreiger

---

很酷 - 高兴能帮助到你。 - Dan Kreiger

可以。使用扩展运算符，您可以像这样做：console.log(...data); - shaedrich

Answer 2

好的，我遇到了同样的问题，我在阅读了MDN的文档后，我认为我知道解决办法了。

我用以下方法修复了它：

var formData = new FormData();
// After instantiate the object we should use append method
// And append more data as you needed with this way:

formData.append('prices', $("#columnPrices").val());
formData.append('id', $("#columnIds").val());
formData.append('file', $("#uploadCSVWithData");

$(this).html('<i class="fa fa-spinner fa-spin" aria-hidden="true">');
$.ajax({
    type: "POST",
    url: '{removed}',
    data: formData,
    success: function(done) {
        $("#submitCSVForUpload").html("Submit");
        $("#uploadFromCSVModal").modal('hide');
    },
    processData: false,
    contentType: false
});

希望它能对你有所帮助 :D

- Arigi Wiratama