如何使圖像預覽

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」 - >img input.files[0]

動態與length - 迭代整個陣列

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; 
      } 
     } 
    } 
}