Jquery上傳多個 - 添加更多的圖像，而不是更改舊的上傳與新上傳

我正在構建一個web應用程序，可以手動上傳與jquery上傳，不使用任何庫，所以情況是，當我上傳多個，例如： 3幅圖像（例如：image_1.jpg，image_2.jpg，image_3.jpg），我已經成功拿到3個圖像的預覽，這是我的js代碼：Jquery上傳多個 - 添加更多的圖像，而不是更改舊的上傳與新上傳

$('button#Images').on('change', function(){ 
    var filelists = this.files || [];   

    $.each(filelists, function(i, filelist){ 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      $('.preview-' + i).html('<img class="image-preview" src="'+ e.target.result +'" width=75/>');     
     } 
     reader.readAsDataURL(filelist); 
    });           
});

我的問題是，當我想添加更多image image（image_4.jpg，image_5.jpg），預覽變爲（image_4.jpg，image_5.jpg，）。我希望如果我點擊按鈕＃圖像，然後舊的圖像不會被新的上傳文件取代，我希望它將舊的上傳與新的圖像相結合，如（image_1.jpg，image_2.jpg，image_3.jpg，image_4。 jpg，image_5.jpg，），

有沒有辦法做到這一點？這裏對不起新手

更新小提琴： https://jsfiddle.net/vxj3bt6d/

您的幫助將不勝感激

來源

2017-05-24 Effendy Salim

請添加HTML代碼來幫助你，或創建一個小提琴例如 –

我有更新例如先生 –

var number = 0; 
 
$('#Images').on('change', function(){ 
 
    var filelists = this.files || [];   
 
    $.each(filelists, function(i, filelist){ 
 
     var reader = new FileReader(); 
 

 
     reader.onload = function (e) { 
 
      $('.preview-' + number).html('<img class="image-preview" src="'+ e.target.result +'" width=75/>'); 
 
      number ++ ; 
 
      
 
     } 
 
     reader.readAsDataURL(filelist); 
 
      
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="preview-0"></div> 
 
<div class="preview-1"></div> 
 
<div class="preview-2"></div> 
 
<div class="preview-3"></div> 
 
<div class="preview-4"></div> 
 
<div class="preview-5"></div> 
 

 

 
<form> 
 
<input type="file" id="Images" accept="image/*" maxlength="50" name="bentoImages[]" multiple="true" accept=".png, .jpg, .jpeg" />             
 
</form>

請檢查代碼的我值總是越來越「 0「，因此具有外部數值的數字可以將圖像置於不同的div。

檢查更新的小提琴太fiddle

感謝

來源

2017-05-24 11:09:52

感謝您的回答啊，預覽工作，有沒有一種解決方案讓我獲得所有圖像的形式數據？ –

格式化圖像在？ –

Jquery上傳多個 - 添加更多的圖像，而不是更改舊的上傳與新上傳

回答

相關問題