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?

insanebits · Accepted Answer · 2015-02-25 12:21:17Z

3

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, 2015 at 12:21

insanebits

8381 gold badge6 silver badges24 bronze badges

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

4 Comments

wiredmark Over a year ago

Thanks. Do I need to change the input name from userfiles to userfiles[]?

insanebits Over a year ago

Yes, because you're using multiple option

wiredmark Over a year ago

I have difficulties to select the input by name then, if I use $('input[name=userfiles[]]') I receive an error because of the []

wiredmark Over a year ago

Nevermind, managed to do it with $('input[name=userfiles\\[\\]]'). I will let you know if I'll do it :)

Community · Accepted Answer · 2017-05-23 12:28:29Z

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, 2017 at 12:28

CommunityBot

11 silver badge

answered Feb 25, 2015 at 12:28

Ôrel

7,7504 gold badges32 silver badges51 bronze badges

5 Comments

wiredmark Over a year ago

Wouldn't it be better to send the whole form via data as @insanebits suggested?

Ôrel Over a year ago

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.

wiredmark Over a year ago

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 Over a year ago

(Also, in the ajax call I had to disable the processData with processData: false)

Ôrel Over a year ago

dump the content of $_FILES or do network capture to see what it is send. My example will upload in $_FILES['file']

Arcadien · Accepted Answer · 2019-10-18 14:22:29Z

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, 2019 at 14:22

Arcadien

2,27816 silver badges26 bronze badges

answered Oct 18, 2019 at 14:03

Jordan Micle

591 gold badge1 silver badge8 bronze badges

Collectives™ on Stack Overflow

jQuery multiple file upload from scratch

3 Answers 3

4 Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related