Javascript 在多次上载中，所有图像都附加到最后一个容器div

我正在使用多文件上载系统。文件上载工作正常。当我决定在文件读取完成之前显示预览div时，会出现问题。为此，我在For循环中创建了一个容器div，并尝试在该容器中插入图像。问题是，文件只会附加到最后一个容器div中

函数句柄覆盖（事件）
{
event.stopPropagation（）；
event.preventDefault（）；
event.dataTransfer.dropEffect='copy'；
document.getElementById（'drop_zone'）。innerHTML=“”；
}
函数handleDragLeave（）
{
document.getElementById（'drop_zone'）。style.background='white'；
}
函数handleFileSelect（事件）
{
event.stopPropagation（）；
event.preventDefault（）；
var files=event.dataTransfer.files；
for（var i=0，file；file=files[i]；i++）{
如果（i>=files.length）{
打破
}
var reader=new FileReader（）；
var container=document.createElement（'div'）；
reader.onloadstart=函数（）{
setAttribute（'style'，'background:gray；padding:5px；width:100px；height:100px；margin:10px；float:left；border:1px solid gray；'）；
document.getElementById（'drop_zone'）.appendChild（container）；
};
reader.onload=（函数（myfile）{
返回函数（事件）{
var img=新图像（）；
img.src=event.target.result；
img.width=100；
img.高度=100；
container.style.background='white'；
子容器（img）；
}
})（文件）；
reader.readAsDataURL（文件）；
}
}
函数handleFileUpload（）
{
var dropZone=document.getElementById（'drop_zone'）；
dropZone.addEventListener（'Dragver'，handleDragOver，false）；
dropZone.addEventListener（'dragleave'，handleDragLeave，false）；
dropZone.addEventListener（'drop'，handleFileSelect，false）；
}
handleFileUpload（）

把文件放在这里
在
中为
循环使用一个闭包来引用当前的
文件

for (var i = 0, file; file = files[i]; i++) {
  (function(file) {
    // do stuff with `file` here
    // `file` is current `File` object
  })(file);
}

更改handleFileSelect中的循环（事件）

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

                    if(i>=files.length){
                        break;
                    }

                    var reader = new FileReader();


                    reader.onloadstart = function (){
                        /*
                        container.setAttribute('style','background:gray;padding:5px;width:100px;height:100px;margin:10px;float:left;border:1px solid gray;');
                        document.getElementById('drop_zone').appendChild(container);
                        */
                    };

                    reader.onload = (function(myfile){
                        return function(event){
                            var container = document.createElement('div');
                            container.setAttribute('style','background:gray;padding:5px;width:100px;height:100px;margin:10px;float:left;border:1px solid gray;');
                            document.getElementById('drop_zone').appendChild(container);

                            var img = new Image();
                            img.src = event.target.result;
                            img.width = 100;
                            img.height = 100;
                            container.style.background = 'white';
                            container.appendChild(img);
                        }
                    })(file);
                    reader.readAsDataURL(file);
                }