通過javascript上傳socket.io圖片

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

不要在這樣的循環中創建函數 ，否則可能導致意外情況。

我建議使用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);
}