JavaScript代码的执行不一致

我想通过拖放读取用户提供的图像，渲染缩略图并将其输出到浏览器

这是我的密码：

函数删除（事件）
{
event.preventDefault（）；
var files=event.dataTransfer.files；
var container=document.getElementById（'dragRec'）；
var reader=new FileReader（）；
reader.onload=函数（）{
container.innerHTML+=''；
}
var itCount=files.length；
对于（变量i=0；i

在逐个加载图像时，一切正常

但是当抓取多个图像时-在正常时间执行它将只输出一个图像，或者（可能）将创建一个空的

img

标记，没有

src

然而，如果我一步一步地运行它（使用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]);
    }
}

函数删除（事件）
{
event.preventDefault（）；
var files=event.dataTransfer.files；
var container=document.getElementById（'dragRec'）；
var readerList=[]；
var itCount=files.length；
对于（变量i=0；i

---

它现在正在工作，但并不真的喜欢它的样子。有什么建议吗？

正如您已经注意到的，这是

文件阅读器的
异步
行为的问题。下面是另一个选项，说明如何对多个文件使用
FileReader


var bucket=document.getElementById（'bucket'）；
var read=函数（文件）{
var reader=new FileReader（）；
reader.readAsDataURL（文件）；
reader.onload=函数（）{
bucket.innerHTML+=“”；
};
};
var负载=功能（e）{
var files=e.dataTransfer.files；
var l=files.length；
var-img=假；
var文件；
while（file=files[--l]）
if（file.type.match（/image\/*/））{
img=真；
读取（文件）；
}
如果（！img）
bucket.innerHTML=“未找到图像文件…”；
返回false；
};
#桶{
位置：相对位置；
高度：60vh；
保证金：5px；
边框：2个灰色虚线；
溢出：自动；
文本对齐：居中；
填充物：5px；
}
#桶形img{
边框：1px点灰色；
保证金：5px；
}
将图像文件拖放到下面

看起来您正在使用FileReader（）。您可以创建它的一个实例，并使用它异步加载多个URL。我不熟悉那个API，但如果我不得不猜测的话，我建议不要重用它。在for循环中创建一个新实例，分配onload处理程序，然后调用readAsDataURL。我快速扫描了MDN上的文档，看起来您的使用没有错误。但是，根据您描述的行为，请尝试不继续。您需要为每个图像创建一个“FileReader”实例，并将函数设置为一个变量，以将其设置得更详细easy@ChrisPerkins，kamus:object的新实例没有解决问题，但请查看添加到问题中的代码。也许你会有一些想法