이미지의 경로 가져 오기 문제가 발생했습니다.

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> 

$('#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>"); } }); 

JQuery와

나는 경고 e.target.result는 할 수 없습니다.

한편 대신 reader.onloadend의

Answer 1

사용 reader.onload, 당신의 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>");   
     } 
});