JavaScript代碼執行不一致

Question

我想讀取用戶通過拖放提供的圖像，並渲染縮略圖並將其輸出到瀏覽器。

這是我的代碼：

function drop(event)
{
    event.preventDefault();
    var files = event.dataTransfer.files;
    var container = document.getElementById('dragRec');
    var reader = new FileReader();
    reader.onload = function(){
        container.innerHTML += '<img width="250" height="250" src="'+ reader.result +'" />';
    }
    var itCount = files.length;
    for(var i = 0; i < itCount; i++)
    {
        reader.readAsDataURL(files[i]);
    }
}

一張一張地加載圖像時，一切正常。

但是，當抓取多張圖片時-在正常時間內執行它只會輸出一張圖片，或者（也許）會創建一個沒有src的空img標簽。

但是，如果我逐步運行它（使用FireBug），則所有內容均已加載，一切都非常完美（所有圖像均存在）。

我想知道是什么原因。

更新：

克里斯·珀金斯（Chris Perkins）和卡莫斯（kamus）使我想到， FileReader異步工作導致在onload處理程序訪問它之前清除FileReader.result變量，這意味着img元素的src屬性為null。

所以我想出了以下解決方案：

function drop(event)
{
    event.preventDefault();
    var files = event.dataTransfer.files;
    var container = document.getElementById('dragRec');
    var readerList = [];
    var itCount = files.length;
    for(var i = 0; i < itCount; i++)
    {
        readerList.push(new FileReader());
        readerList[i].onload = function(){
            container.innerHTML += '<img width="250" height="250" src="'+ this.result +'" />';
        }
        readerList[i].readAsDataURL(files[i]);
        formData.append('file[]', files[i]);
    }
}

它現在正在工作，但並不十分喜歡它的外觀。 有什么建議嗎？

Answer 1

正如您已經指出的，這是FileReader的async行為問題。 這是另一個選項，您可以使用FileReader來處理多個文件。

 var bucket = document.getElementById('bucket'); var read = function(file) { var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function() { bucket.innerHTML += "<img src='" + reader.result + "' width='70'/>"; }; }; var load = function(e) { var files = e.dataTransfer.files; var l = files.length; var img = false; var file; while (file = files[--l]) if (file.type.match(/image\\/*/)) { img = true; read(file); } if (!img) bucket.innerHTML = "No image file found ..."; return false; }; 

 #bucket { position: relative; height: 60vh; margin: 5px; border: 2px dashed grey; overflow: auto; text-align: center; padding: 5px; } #bucket img { border: 1px dotted grey; margin: 5px; } 

 <p>Drag-drop image files below ...</p> <div id="bucket" ondrop="return load(event);" ondragover="return false"></div>