HTML5 AJAX Multiple Files Upload

Question

I came across this plain js ajax upload code (it seems that jquery $.post does not work with HTML5 for some reason),

    /* If you want to upload only a file along with arbitary data that
       is not in the form, use this */
    var fd = new FormData();
    fd.append("file", document.getElementById('file').files[0]);

    /* If you want to simply post the entire form, use this */
    //var fd = document.getElementById('form1').getFormData();

    var xhr = new XMLHttpRequest();        
    xhr.upload.addEventListener("progress", uploadProgress, false);
    xhr.addEventListener("load", uploadComplete, false);
    xhr.addEventListener("error", uploadFailed, false);
    xhr.addEventListener("abort", uploadCanceled, false);
    xhr.open("POST", "Upload.php");
    xhr.send(fd);

But I have two issues here,

what does this line mean after the object FormData?

fd.append("file", document.getElementById('file').files[0]);

Why do I need an ID there? Can I do something use jquery append() with $('input[type=file]')?

This ajax is only for single file upload, how can I change it for multiple files upload?

Community · Accepted Answer · 2020-06-20 09:12:55Z

9

what does this line mean after the object FormData?
fd.append("file", document.getElementById('file').files[0]);

The document.getElementById('file') gets the <input type="file" id="file"> element by its ID. The element.files[0] grabs the first selected file from the element. The fd.append("file", file) appends it to an FormData instance with the field name of file. The fd is later to be sent as multipart/form-data XHR request body.

Why do I need an ID there? Can I do something use jquery append() with $('input[type=file]')?

The ID is not necessary. It's after all just an example in order to be able to get the <input type="file"> from the document by its ID. Note that the append() function in this example is part of the FormData API and is not to be confused with jQuery's append() function. Also note that the 1st argument of append() represents the field name, not the ID. That they are the same is just a coincidence.

This ajax is only for single file upload, how can I change it for multiple files upload?

Just append multiple fields to FormData. Assuming that you have a File[], here's an example:

for (var i = 0; i < files.length; i++) { 
    fd.append("file" + i, files[i]);
}

It'll be available in the server end by the field names file0, file1, etc.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 21, 2011 at 15:00

BalusC

1.1m377 gold badges3.7k silver badges3.6k bronze badges

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

9 Comments

Run Over a year ago

thanks for the answer! can I ask about this - files.length where does it the files come from? what should I set before this for() so I can do files.length? thanks!

BalusC Over a year ago

Uh, just get it from wherever the user has specified multiple files?

aeosynth Over a year ago

the first argument to append is not the id; it's the name, or key, of your key / value pair.

BalusC Over a year ago

@aeo: that's correct. Did I tell otherwise? The id="file" is just mentioned because document.getElementById() couldn't otherwise select it.

aeosynth Over a year ago

Your post seems to imply that the first arg is the id: 1 > It appends the currently selected File of an <input type="file" id="file"> you're implying that passing an arg of file will match an element of id file 2 > The ID is not necessary. you're implying that the first arg is the id

|

Collectives™ on Stack Overflow

HTML5 AJAX Multiple Files Upload

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related