javascript for循环重复上一次迭代(javascript for-loop repeating last iteration)

 我正在尝试裁剪调整大小，使用JS在客户端浏览器上显示图像。 我能够这样做，除了我的文本循环是错误的。 您可以在下面的图像中看到它正在重复上一次迭代。 我的图像循环工作正常。 Hint - 第一个文件名文本应该是black.jpg 。 
 
  
 
 尝试了几个小时后无法解决问题。 以下是代码的修剪版本。 如果需要，这里是脚本的完整版本 。 请帮忙，我还在学习。 
 
 HTML 
 
<input type="file" id="input" onchange="prevCrop()" multiple> 
<ul id="listWrapper"></ul> 
 
 JAVASCRIPT 
 
function prevCrop() {
    var files = document.querySelector('input[type=file]').files;

    for (var i = 0; i < files.length; i++) {
        var file = files[i]; 
        var fileSize = Math.floor(file.size/1024);
        var info = file.name + " " + fileSize + " KB : iteration number - " + i;

        var reader = new FileReader();
        if (reader != null) {
        reader.onload = GetThumbnail;
        reader.readAsDataURL(file);
        }           
    }


    function GetThumbnail(e) {
        var canvas = document.createElement("canvas");
        var newImage = new Image();
        newImage.src = e.target.result;
        newImage.onload = cropResize; 

        function cropResize() {
            canvas.width = 70;
            canvas.height = 70;
            ### more codes here that handles image   ###

            var dataURL = canvas.toDataURL("image/jpg");
            var thumbList = document.createElement('div');
            thumbList.setAttribute('class', 'tlistClass');  
            var nImg = document.createElement('img'); 
            nImg.src = dataURL;     
            var infoSpan = document.createElement('span');                      
            infoSpan.innerHTML = info;          
            var handle = document.getElementById("listWrapper").appendChild(thumbList);
            handle.appendChild(nImg);
            handle.appendChild(infoSpan);   
        }               
    }

}

I am trying to crop-resize n display an image on client-browser using JS. I am able to do so except that my text loop is wrong. You can see in the image below that it is repeating the last iteration. My image loop works fine though. Hint - First filename text is supposed to be black.jpg.
 
 
Am unable to solve the issue after having tried for several hours. Given below is a trimmed version of the code. If needed here is the complete version of the script. Please help, I am still learning. 
 
HTML
 
<input type="file" id="input" onchange="prevCrop()" multiple> 
<ul id="listWrapper"></ul> 
 
JAVASCRIPT
 
function prevCrop() {
    var files = document.querySelector('input[type=file]').files;

    for (var i = 0; i < files.length; i++) {
        var file = files[i]; 
        var fileSize = Math.floor(file.size/1024);
        var info = file.name + " " + fileSize + " KB : iteration number - " + i;

        var reader = new FileReader();
        if (reader != null) {
        reader.onload = GetThumbnail;
        reader.readAsDataURL(file);
        }           
    }


    function GetThumbnail(e) {
        var canvas = document.createElement("canvas");
        var newImage = new Image();
        newImage.src = e.target.result;
        newImage.onload = cropResize; 

        function cropResize() {
            canvas.width = 70;
            canvas.height = 70;
            ### more codes here that handles image   ###

            var dataURL = canvas.toDataURL("image/jpg");
            var thumbList = document.createElement('div');
            thumbList.setAttribute('class', 'tlistClass');  
            var nImg = document.createElement('img'); 
            nImg.src = dataURL;     
            var infoSpan = document.createElement('span');                      
            infoSpan.innerHTML = info;          
            var handle = document.getElementById("listWrapper").appendChild(thumbList);
            handle.appendChild(nImg);
            handle.appendChild(infoSpan);   
        }               
    }

}

原文：https://stackoverflow.com/questions/36959445