send data with javascript FormData()

Question

My code has one input tag and send it to my php file by using jquery FormData() now i want add another input tag and send more data. jquery it's:

var files = document.getElementById('data-file').files;
var data = new FormData();

$.each(files, function (keys, values) {
    data.append(keys, values);
});
$.ajax({
    url: 'upload.php',
    type: 'POST',
    data: data,
    cache: false,
    processData: false,
    contentType: false,
});

and html code is:

<input style="display:none;" type="file" name="data-file" id="data-file" onchange="image_preview(this)" multiple="multiple" />

i want change html to this and send input data to php file by using jquery FormData():

<input style="display:none;" type="file" name="data-file" id="data-file" onchange="image_preview(this)" multiple="multiple" />
<input type="hidden" name="imgpath" id="imgpath" value="<?php echo $imgpath; ?>"  />
<input type="hidden" name="id" id="id" value="<?php echo $id; ?>"  />

And if you stick your inputs in a form, you could just pass the form to FormData — adeneo, Mar 14 '14 at 16:23
possible duplicate of [Using HTML5 file uploads with AJAX and jQuery](http://stackoverflow.com/questions/4006520/using-html5-file-uploads-with-ajax-and-jquery) — Ohgodwhy, Mar 14 '14 at 16:33

score 1 · Accepted Answer · answered Mar 14 '14 at 18:53

You can use FormData's append method to add additional key values to the FormData as you did within $.each

for eg.

$.each(files, function (keys, values) {
    data.append(keys, values);
});

data.append('imgpath', $('#imgpath').val());
data.append('id', $('#id').val());

send data with javascript FormData()

1 Answers1