javascript - 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
});

Answer 1

如果没有 iterating ，则无法使用 console.log 检查

FormData 。

这是一篇关于 how to inspect FormData 的文章

如果您想在执行 ajax post 请求之前 console.log 您的 FormData 对象，您可以执行类似的操作(我正在使用 source docs 中的示例)与您的代码):

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]); 
}