在jQuery中多图像上传之前无法打印文件名

Question

我试图在上传之前获取图像预览及其名称。但不能为每个图像打印正确的名称。我曾尝试

event.target.name返回“未定义”和file.name这对于所有其他图像返回第一个图像的名称。任何帮助，将不胜感激。

<input type="file" name="file[]" id="image-upload" class="file-input" accept="image/*" multiple> 
<div id="img-wrapper"></div> 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 

<script type="text/javascript"> 
    $("#image-upload").change(function(){    
     var files = $(this)[0].files; 

     for(var i = 0; i< files.length; i++) { 
      var file = files[i];     
      var reader = new FileReader();     
      reader.onload = function(event){      
       var img = event.target.result; 

       console.log(event.target.name); //prints 'undefined' 
       console.log(file.name);   //prints 1st image's name for all images 

       $('#img-wrapper').append("<img class='thumbnail' src='" + img + "'" + 
         "title='" + file.name + "'/>"); 

      }; 

      reader.readAsDataURL(file); 
     }        

    }); 
</script> 

Answer 1

event.target.name是不确定的，因为事件的目标是FileReader对象，而不是文件：

EXAMPLE

$("#image-upload").change(function() { 
    $("#img-wrapper").empty(); 
    var files = $(this)[0].files; 

    for (var i = 0; i < files.length; i++) { 
     var file = files[i]; 
     var reader = new FileReader(); 

     // Give the reader a name 
     reader.name = 'Reader #' + i; 

     reader.onload = function(event) { 
      // Append the reader's name to the output 
      $("#img-wrapper").append('<div>' + event.target.name + '<div>'); 
     }; 
    }; 

    reader.readAsDataURL(file); 
}); 

关于你的文件名问题，FileReader是异步的。 From MDN：

的对象的FileReader让Web应用程序异步读取存储在用户的计算机上的文件（或原始数据缓存），使用文件或BLOB对象到指定的文件或数据的内容阅读。

这意味着你的for循环完成其所有的迭代中onload回调被解雇，并file总会代表在循环看到的最后一个项目之前。当onload函数被触发时，它们都具有正确的结果（图像），因为您使用的是事件对象，但它们全都使用相同的file。

EXAMPLE

$("#image-upload").change(function(){    
    var files = $(this)[0].files; 

    for(var i = 0; i< files.length; i++) { 
     var file = files[i]; 
     var reader = new FileReader(); 

     reader.name = 'Reader #' 
     reader._i = i; 

     $('#img-wrapper').append("<div>LOOP #" + i + "</div>"); 

     reader.onload = function(event) { 
      var img = event.target.result; 
      $('#img-wrapper').append("<div>READER #" + this._i +"</div>"); 

     }; 

     reader.readAsDataURL(file); 
    }        

}); 

你将不得不调整你的代码可以做你想做的事情。

第二个想法，你可能不需要重组任何东西。您可以绑定onload功能为每个读者，并通过在文件的名称：

EXAMPLE

$("#image-upload").change(function() { 
    var files = $(this)[0].files; 

    for (var i = 0; i < files.length; i++) { 
     var file = files[i]; 
     var reader = new FileReader(); 

     // Note that parameters are reordered due to binding below 
     reader.onload = (function(name, event) { 
     var img = event.target.result; 
     $('#img-wrapper').append(
      "<img class='thumbnail' src='" + img + "'" + "title='" + name + "'/>"); 
     }).bind(reader, file.name); 

     reader.readAsDataURL(file); 
    } 
});