Question

所以我正在使用javascript做一个简单的多图像上传脚本，但是必须使用socket.io才能将图像放入数据库。为了运行预览，我一直在 event.target.result 并将其作为图像src放在div上。有没有什么方法可以将它存储在每个图像的数组中，以便我可以通过套接字传输它，并让它在另一边加载？当我尝试将其加载到数组中时，它总是未定义的。

     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，它可能导致意想不到的事情。

我建议使用JSHint，这非常有用。

Answer 2

你犯了两个错误：

1）您应该将i变量与file一起传递到您的闭包 2）最重要的是：reader.onload是一个不会立即调用的函数，但在一些延迟中调用，因此在 uploadFiles()调用之后将被称为。这就是为什么你得到一个空的picture。

尝试按如下方式重写代码：

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

socket.io图像通过javascript上传

2 个答案: