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?

score 2 · Accepted Answer · answered Feb 25 '15 at 12:21

2

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

answered Feb 25 '15 at 12:21

insanebits

818
1
6
24

1

Thanks. Do I need to change the input name from `userfiles` to `userfiles[]`? – wiredmark Feb 25 '15 at 12:24
2

Yes, because you're using multiple option – insanebits Feb 25 '15 at 12:25
I have difficulties to select the input by name then, if I use `$('input[name=userfiles[]]')` I receive an error because of the `[]` – wiredmark Feb 25 '15 at 12:32
Nevermind, managed to do it with `$('input[name=userfiles\\[\\]]')`. I will let you know if I'll do it :) – wiredmark Feb 25 '15 at 12:35

score 1 · Answer 2 · edited May 23 '17 at 12:28

1

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

edited May 23 '17 at 12:28

Community

1
1

answered Feb 25 '15 at 12:28

Ôrel

7,044
3
27
46

Wouldn't it be better to send the whole form via `data` as @insanebits suggested? – wiredmark Feb 25 '15 at 12:38
I don't know why you need to loop on each of your file. If you want to add a progressbar and send files one by one (like gmail attachments) it is a solution. If you don't care, just send them all in once. – Ôrel Feb 25 '15 at 12:56
My target would be, in the PHP file, to do: `if (isset($_FILES['userfiles']))` and so on. I don't need the progress bar to appear, but will I be able to do this if I send the whole form? Because right now, it doesn't even seems to enter the `if` statement. – wiredmark Feb 25 '15 at 13:01
(Also, in the ajax call I had to disable the processData with `processData: false`) – wiredmark Feb 25 '15 at 13:03
dump the content of $_FILES or do network capture to see what it is send. My example will upload in $_FILES['file'] – Ôrel Feb 25 '15 at 13:11

score 0 · Answer 3 · edited Oct 18 '19 at 14:22

0

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

edited Oct 18 '19 at 14:22

Arcadien

2,258
16
26

answered Oct 18 '19 at 14:03

Jordan Micle

59
1
8

jQuery multiple file upload from scratch

3 Answers3