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
– adeneo, Commented Mar 14, 2014 at 16:23
possible duplicate of Using HTML5 file uploads with AJAX and jQuery — Ohgodwhy
– Ohgodwhy, Commented Mar 14, 2014 at 16:33

code-jaff · Accepted Answer · 2014-03-14 18:53:54Z

1

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

answered Mar 14, 2014 at 18:53

code-jaff

9,3284 gold badges38 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

send data with javascript FormData()

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related