html5 upload multiple files with javascript

Question

here is the upload logic in js

var upload = function(){

    if(_file.files.length === 0){
        return;
    }

    var data = new FormData();
    data.append('SelectedFile', _file.files[0]);

    var request = new XMLHttpRequest();
    request.onreadystatechange = function(){
        if(request.readyState == 4){
            try {
                var resp = JSON.parse(request.response);
            } catch (e){
                var resp = {
                    status: 'error',
                    data: 'Unknown error occurred: [' + request.responseText + ']'
                };
            }
            console.log(resp.status + ': ' + resp.data);
        }
    };

    request.upload.addEventListener('progress', function(e){
        _progress.style.width = Math.ceil(e.loaded/e.total) * 100 + '%';
    }, false);

    request.open('POST', 'upload.php');
    request.send(data);
}

I run the function every time user selected something, but I only got the first file if user selected multiple files.

Reinder Wit · Accepted Answer · 2014-03-05T07:55:30.867

1

That's because you're only adding the first file to your data object:

data.append('SelectedFile', _file.files[0]);

You need to add all your files in the _file.files collection Something like:

for(var i = 0 ; i < _file.files.length; i++ ) {
    data.append('SelectedFile'+i, _file.files[i]);
}

edited Mar 05 '14 at 07:55

answered Mar 05 '14 at 07:39

Reinder Wit

6,490
1
25
36

next, how to resize? I don't understand the code here http://stackoverflow.com/questions/10333971/html5-pre-resize-images-before-uploading – user3346088 Mar 05 '14 at 08:02
It's all explained here: http://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/ Once you've resized the image using a canvas object, you can retrieve it using canvas.toDataURL(). If you need more info, you'll have to create a separate thread on SO for this I guess – Reinder Wit Mar 05 '14 at 08:14

score -1 · Answer 2 · answered Mar 05 '14 at 07:41

-1

var data = new FormData();
data.append('SelectedFile', _file.files[0]);

Instead of this code, try something like this:

var data = new FormData();
for (var i in _file.files) data.append('SelectedFile'+i, _file.files[i]);

answered Mar 05 '14 at 07:41

MSzucs

178
1
10

html5 upload multiple files with javascript

2 Answers2