最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Issues with FormData Being Null? - Stack Overflow

programmeradmin2浏览0评论

I'm seeming to have an issue with FormData being null. I'm trying to upload files and JSON in a single POST request. I've tried a variety of things, but nothing has seemed to work. I'm wondering if I've messed something basic up here, but I can't seem to find anything. Your help is greatly appreciated!

<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>

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

I'm seeming to have an issue with FormData being null. I'm trying to upload files and JSON in a single POST request. I've tried a variety of things, but nothing has seemed to work. I'm wondering if I've messed something basic up here, but I can't seem to find anything. Your help is greatly appreciated!

<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>

And 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
});
Share Improve this question asked Jul 12, 2017 at 18:18 Finn CFinn C 2272 gold badges3 silver badges9 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 4

FormData can't be inspected with console.log without iterating.

Here is an article on how to inspect FormData

If you want to console.log your FormData object before doing the ajax post request, you can do something like this (I'm using the example from the source docs with your code):

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

Okay I have same problem and I think know the solution after I read this documentation from MDN.

I fix it with this way:

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

I hope it can help you :D

发布评论

评论列表(0)

  1. 暂无评论