이미지 미리보기

Question

의 목록을 만드는 방법이 코드는 한 번에 하나 개의 이미지를 이미지 미리보기

$("#weeklyOfferImages").change(function(){ 
    readURLWeekly(this); 
}); 
function readURLWeekly(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 
     reader.onload = function (e) { 
      $('.weeklyPreview').append('<img data-src="holder.js/140x140" src="'+e.target.result'"class="offer-image img-polaroid"/>'); 
     }, 
     reader.readAsDataURL(input.files[0]); 
    } 
} 

에 대해 다음 코드를 표시했다. 어떻게 여러 이미지를 표시 할 수 있습니까? 예를 들어, 파일 오브젝트는 4 개의 파일을 포함합니다.

Answer 1

당신은 "0"을 표시 - length에>img input.files[0]

동적 - 반복

function readURLWeekly(input) { 
    if(input.files) 
     for(var i = 0; i < input.files.length; i++) { 
      if (input.files[i]) { 
       var reader = new FileReader(); 
       reader.onload = function(e) { 
        $('.weeklyPreview').append('<img data-src="holder.js/140x140" src="' + e.target.result + '" class="offer-image img-polaroid"/>'); 
       }, 
       reader.readAsDataURL(input.files[i]); 
      } 
     } 
} 

Answer 2

이 같은

아마 뭔가 :

$("#weeklyOfferImages").change(function(){ 
    readURLWeekly(this); 
}); 
function readURLWeekly(input) { 
    if (input.files) { 
     for (var i=0;i<4;i++) { 
      if (input.files[i]) { 
       var reader = new FileReader(); 
       reader.onload = function (e) { 
        $('.weeklyPreview').append('<img data-src="holder.js/140x140" src="'+e.target.result'"class="offer-image img-polaroid"/>'); 
       }, 
       reader.readAsDataURL(input.files[i]); 
      } else { 
       break; 
      } 
     } 
    } 
}