socket.io image upload via javascript

Question

So I'm doing a simple multiple image upload script using javascript, but socket.io has to be used in order to get the image into the database. In order to run previews I have been taking and putting it as the image src on a div. 并将其作为图像src放在div上。 Is there any way I can store the this in an array for each image so that I can transfer it over the socket, and have it load on the other side? When I try to load it into an array, it's always undefined.

     for (var i = 0; file = files[i]; i++) {


        name[i] = files[i].name;

        // if the file is not an image, continue
        if (!file.type.match('image.*')) {
            continue;
        }

        reader = new FileReader();
        reader.onload = (function (tFile) {
            return function (evt) {
                var div = document.createElement('div');
                var miniDiv = document.createElement('div');
                div.id = "photoDiv";
                div.innerHTML = '<img style="width: 120px; height: auto;" src="' + evt.target.result + '" />';
                div.className = "photos";

                var data = evt.target.result;
                picture[i] = data;
                document.getElementById('filesInfo').appendChild(div);
                document.getElementById('previewDiv').appendChild(document.getElementById('filesInfo'));


            };
        }(file));
        reader.readAsDataURL(file);
    }
    uploadFiles();
} 

Answer 1

Don't make functions within a loop like that, it can lead to unexpected things.

I would suggest using JSHint , it's very helpful.

Answer 2

You made two mistakes:

1) You should pass i variable to your closure together with file .
2) The most important: reader.onload is a function that will be called not immediately, but in some delay, and as a result it will be called after uploadFiles() call. That's why you get an empty picture .

Try to rewrite your code as follows:

var done = 0;
var picture = [];
for (var i = 0; file = files[i]; i++) {
    name[i] = files[i].name;

    // if the file is not an image, continue
    if (!file.type.match('image.*')) {
        if (++done === files.length) {
            uploadFiles();
        }
        continue;
    }

    reader = new FileReader();
    reader.onload = (function (tFile, index) {
        return function (evt) {
            //[...]
            picture[index] = data;
            //[...]
            if (++done === files.length) {
                //the last image has been loaded
                uploadFiles();
            }
        };
    }(file, i));
    reader.readAsDataURL(file);
}