user1063287 user1063287 - 7 months ago 9
Javascript Question

How to append multiple file inputs to a FormData object using $.each?

I have a multiple (and dynamic) number of inputs of

type=file
.

I want to create a FormData object out of them.

I need to manually append them to the object as I need access to their filenames for inserting into a database and therefore need to specify a filename is this format:

myFormData.append(name,file,filename);


HTML

<form id="my_form" enctype="multipart/form-data">
<input type="file" name="undefined" id="file_1" data-filename="image.jpg">
<input type="file" name="undefined" id="file_2" data-filename="image2.jpg">
<button>click</button>
</form>


jQuery

var myFormData = new FormData();

$(document).on("click", "button", function(e) {
e.preventDefault();
var inputs = $("#my_form input");
$.each(inputs,function(obj,v) {
var file = v.files[0];
var filename = $(v).attr("data-filename");
var name = $(v).attr("id");
myFormData.append(name, file, filename);
});

//alert(JSON.stringify(myFormData));
console.log(myFormData);
});


I don't think the object is being constructed properly and I haven't been able to correctly view the contents of the object to confirm this.

This is what I get in the console:

enter image description here

jsFiddle

http://jsfiddle.net/rwone/K7aMw/

Answer

There is no good way to see the contents of FormData. A trick would be to send it (POST) and look at the network status.

Example: http://jsfiddle.net/K7aMw/2/

$(document).on("click", "button", function (e) {
    e.preventDefault();
    var inputs = $("#my_form input");
    $.each(inputs, function (obj, v) {
        var file = v.files[0];
        var filename = $(v).attr("data-filename");
        var name = $(v).attr("id");
        myFormData.append(name, file, filename);
    });
    var xhr = new XMLHttpRequest;
    xhr.open('POST', '/echo/html/', true);
    xhr.send(myFormData);
});

Then you'll see if the files are added (here Chrome) in the Network Tab.

Image