jQuery multiple file upload from scratch

Question

I am trying to implement a multiple image uploader in jQuery using the new HTML5 multiple attribute.

My code is the following:

<form action="file-upload.php" method="post" enctype="multipart/form-data">
    <input name="userfiles" type="file" multiple="multiple">
</form>

The JS code I am using is taken from a discussion here on SO, and is the following:

 $('input[name=userfiles]').change(function() {
    var names = [];
    for (var i = 0; i < $(this).get(0).files.length; ++i) {
        names.push($(this).get(0).files[i].name);
        console.log(names[i]);
    }
 });

With this I am able to print on the console the file names I select, but what if I need to get the exact val() of those files? I tried replacing .name with .val() , but I get an error.

I think I would need a fakepath of every single file if I want to be able to work with them with $.ajax . If this is correct, how can I cycle though them in the PHP file where the get request is sent, in order to upload them?

Answer 1

You can make use of HTML5 FormData API. https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects

var form = new FormData();
for (var i = 0; i < $(this).get(0).files.length; ++i) {
    form.append('userfiles[]', $(this).get(0).files[i]);
}

// send form data with ajax
$.ajax({
    url: 'url',
    type: "POST",
    data: form
});

Or if you cannot use FormData there is a way to send it natively: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files

Answer 2

You don't need to manipulate file path, in your ajax call just use the File and put it into a new FormData

Something like that:

 $.ajax({
'type':'POST',
'data': (new FormData()).append('file', $(this).get(0).files[i])

See HTML5 multiple file upload: upload one by one through AJAX

Answer 3

If you use jquery-file-upload plugin you can use this

<input class="fileupload" type="file" name="file">

and

$('.fileupload').each(function () {
  $(this).fileupload({
  //your code goes here
})