所有图像都会附加到多个上传中的最后一个容器div上 [英] all image gets appended to last container div in multiple upload

问题描述

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

  function handleDragOver（event）{event.stopPropagation（）; event.preventDefault（）; event.dataTransfer.dropEffect ='copy';的document.getElementById（ drop_zone）的innerHTML = ; } function handleDragLeave（）{document.getElementById（'drop_zone'）。style.background ='white'; } function handleFileSelect（event）{event.stopPropagation（）; event.preventDefault（）; var files = event.dataTransfer.files; for（var i = 0，file; file = files [i]; i ++）{if（i> = files.length）{break; } var reader = new FileReader（）; var container = document.createElement（'div'）; reader.onloadstart = function（）{container.setAttribute（'style'，'background：grey; padding：5px; width：100px; height：100px; margin：10px; float：left; border：1px solid gray;'）;的document.getElementById（ drop_zone）的appendChild（容器）。 }; reader.onload =（function（myfile）{return function（event）{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（文件）; }} function handleFileUpload（）{var dropZone = document.getElementById（'drop_zone'）; dropZone.addEventListener（'dragover'，handleDragOver，false）; dropZone.addEventListener（'dragleave'，handleDragLeave，false）; dropZone.addEventListener（'drop'，handleFileSelect，false）; }  < div id =drop_zone    style =width：95％; border：4px dotted gray; float：left; min-height：100px; text-align：center; line-height：100px; color：grey; font-size：25px;>将文件放在这里< / div>  

解决方案

循环引用当前文件

  for（var i = 0，file; file = files [i]; i ++）{
（function（file）{
 // do这里有`file`的东西
 //`file`是当前的`File`对象
}）（file）; 
} 
  

I am working on a multiple file upload system.File upload works fine.Problem arises when i've decided to show a preview div before file reading complete.For this purpose i create a container div inside for loop and tried to insert image in that container.Problem is that file is only gets appended to last container div.

            function handleDragOver(event)
            {
                event.stopPropagation();
                event.preventDefault();
                event.dataTransfer.dropEffect = 'copy';
                document.getElementById('drop_zone').innerHTML="";
            }

            function handleDragLeave()
            {
                document.getElementById('drop_zone').style.background = 'white';
            }

            function handleFileSelect(event)
            {
                event.stopPropagation();
                event.preventDefault();

                var files = event.dataTransfer.files;

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

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

                    var reader = new FileReader();

                    var container = document.createElement('div');
                    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 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);



                }


            }
            function handleFileUpload()
            {
                var dropZone = document.getElementById('drop_zone');

                dropZone.addEventListener('dragover', handleDragOver, false);
                dropZone.addEventListener('dragleave', handleDragLeave, false);
                dropZone.addEventListener('drop', handleFileSelect, false);

            }
            
            handleFileUpload();

<div  id="drop_zone" style="width:95%;border:4px dotted gray;float:left;min-height:100px;text-align:center;line-height:100px;color:gray;font-size:25px;">
      Drop files here

</div>

解决方案

Use a closure within for loop to reference current file

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

这篇关于所有图像都会附加到多个上传中的最后一个容器div上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！