问题在获取图像的路径

Question

我上传多个图像并在从输入选择后显示它们。但我无法使用FileReader获取图像路径。

HTML

<div class="col-md-4"> 
       <input id="images" name="images" placeholder="" class="form-control input-md" type="file" accept="image/*" multiple> 
      </div> 
<div class="col-md-2"> 
       <input type="button" id="btn" name="btn" class="btn btn-primary" value="upload"> 
      </div> 

JQuery的

$('#btn').click(function(){ 

     var images = $('#images')[0].files; 
     var reader, file , i=0 , len=images.length; 

    for (; i < len; i++) { 

     if(window.FileReader){ 
      var file = $('#images').files[i]; 
      reader = new FileReader(); 
      reader.onloadend = function (e) { 
         alert(e.target.result); 
         showimage(e.target.result); 
        }; 
        reader.readAsDataURL(file);  
      console.log(); 
     } 
     } 
    function showimage(source){ 

        $('#img').append("<div class='col-sm-2'><img src="+src+" class='thumbnail hw'></img></div>");   
     } 
}); 

我不能警报e.target.result。

Answer 1

使用reader.onload代替reader.onloadend

同时，在您的showImage（源）功能，你传递的参数是“源”，但你在函数中使用“SRC”。

Answer 2

$('#btn').click(function(){ 

     var images = $('#images')[0].files, 
      input=$('#images').get(0) ; /* need to add this */ 
     var reader, file , i=0 , len=images.length; 

    for (; i < len; i++) { 

     if(window.FileReader){ 
      var file = input.files[i]; 
      reader = new FileReader(); 
      reader.onloadend = function (e) { 
         alert(e.target.result); 
         showimage(e.target.result); 
        }; 
        reader.readAsDataURL(file);  
      console.log(); 
     } 
     } 
    function showimage(source){ 

        $('#img').append("<div class='col-sm-2'><img src="+source+" class='thumbnail hw'></img></div>");   
     } 
});