2013-02-09 3 views
1

덕분에 여기에 대한 몇 가지 도움말을 내가 선택한 이미지를 미리보기하는 방법을 가지고 사용하여 업로드 :이 기능을 루프하는 방법은 무엇입니까?

<input type='file' name="files[]" onchange="readURL(this);" multiple /> 
<div id="previews"></div> 

<script> 
    function readURL(input) { 
     if (input.files && input.files[0]) { 

      var reader = new FileReader(); 

      reader.onload = function (e) { 
       var container = $('#previews'); 
       var image = $('<img>').attr('src', e.target.result).width(150); 
       image.appendTo(container); 
      }; 
      reader.readAsDataURL(input.files[0]); 
     } 
    } 
</script> 

내가 각 파일에 대해이 기능은 입력을 선택하는 방법 루프 궁금 해서요? .each 같은 것을 사용하는 곳 난 그냥 볼 수 없습니다()

편집 :

이 ..이 시도하지만 잘못된 곳,은 2 미리보기를 표시 할 때하지만 모두 같은 이미지의 무엇입니까?

function readURL(input) { 
    $.each(input.files,function(i) { 
     var reader = new FileReader(); 
     reader.onload = function (e) { 
      var container = $('#previews'); 
      var image = $('<img>').attr('src', e.target.result).width(150); 
      image.appendTo(container); 
     }; 
     reader.readAsDataURL(input.files[0]); 
    }); 
} 
+2

변경 이벤트에서 함수가 호출되었으므로; 루프가 없습니다. – muratgu

+0

'input.files [2]'와 같이 하나 이상의 이미지가 선택되면 선택된 이미지를 반복하는 것을 의미합니까? – adeneo

+0

프로그래밍에서 이벤트에 대해 더 많이 읽을 수 있습니다. 특히 JS의 경우 : http://stackoverflow.com/questions/5758363/how-does-event-handling-work-javascript – nXqd

답변

2

input.files 배열처럼 동작하는하는 FileList이다.
다른 배열처럼 jQuery.each을 사용할 수 있습니다.

+0

w3c의 정의를 읽는 것이 어렵다면 [undertand-one] (https://developer.mozilla.org/en-US/docs/DOM/FileList)을 참조하십시오. –

0

파일이 선택된 마지막 줄을 반복하면됩니다.

function readURL(input) { 
    var reader = new FileReader(); 
    reader.onload = function (e) { 
     var container = $('#previews'); 
     var image = $('<img>').attr('src', e.target.result).width(150); 
     image.appendTo(container); 
    }; 

    $.each(input.files,function(i) { 
     reader.readAsDataURL(input.files[i]); 
    }); 
} 
관련 문제