jQuery的功能的Onload停止循环，通过为环X内部功能

Question

我传递的图像文件从XMLHttpRequest来此功能readfiles（文件）使用数据传递

我想要做的是预览图像和图像文件名称，同时在reader.onload（）函数内的一行代码中。

而且，因为将有超过1个文件传递给函数，我把它们扔到一个for循环

的问题是，当我试图通过预览图像readDataURL它确定，但文件名不能预览我认为，因为reader.onload（）函数停止for循环通过图像文件循环。

这里是我的代码

function readfiles(files) { 

    var x; 

    for(x = 0; x < files.length; x = x + 1) { 

     var reader = new FileReader(); 
     reader.readAsDataURL(files[x]); 
     reader.onload = function(e) { 
      console.log(e.target.result); 
      console.log(files[x].name); 
     } 

    } 
} 

一直在寻找解决方案现在约5小时，任何帮助！

Answer 1

ROX的答案是不正确的。在他的情况下，你会看到它会输出4次相同的文件名。你需要的是一个闭包，它将在每次迭代时保持正确的上下文。您可以按如下所示完成此操作。检查小提琴http://jsfiddle.net/cy03fc8x/。

function readfiles(files) { 
    for(x = 0; x < files.length; x = x + 1) { 
     var file = files[x]; 
     (function(file){ //this is a closure which we use to ensure each iteration has the right version of the variable 'file' 
      var reader = new FileReader(); 
      reader.readAsDataURL(file); 

      reader.onload = function(e) { 
       console.log(e.target.result); 
       console.log(file.name); 
      } 
     })(file);   //on each iteration, pass in the current file to the closure so that it can be used within 

    } 
} 

Answer 2

由于onload会稍后运行，此时x比您的文件数量多一个。例如，如果您有4个文件，执行onload时x将为5。

所以参考保持到当前文件：

function readfiles(files) { 
    for (var x = 0; x < files.length; x = x + 1) { 
     // keep reference to current file on iteration 
     var file = files[x]; 

     // create closure and execute it 
     (function (file) { 
      var reader = new FileReader(); 
      reader.readAsDataURL(file); 

      reader.onload = function(e) { 
       console.log(file.name); 
      } 
     }(file)); // pass the `file` to the function 
    } 
}