Question

我似乎有一个FormData为null的问题。我正在尝试在单个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

FormData无iterating，无法检查{p> console.log。

以下是关于how to inspect 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]); }对象，您可以执行以下操作（我使用source docs中的示例代码）：

<Link to='#' data-toggle='collapse' data-target={dataTarget} aria-expanded='false'>{this.props.text}</Link>

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

FormData的问题是否为空？

2 个答案: