Jquery上传多个 - 添加更多图像而不是用新上传更改旧上传

Question

我正在构建一个网络应用程序，可以手动上传多个 jquery 上传，而不使用任何库，所以情况是，当我上传多个时，例如：3 张图片（例如：image_1.jpg、image_2.jpg、image_3. jpg），我已经成功获得了3张图片的预览，这是我的js代码：

$('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_4.jpg,image_5.jpg)，预览变为 (image_4.jpg, image_5.jpg,)。我想如果我单击按钮#images，那么旧图像不会被新的上传文件替换，我希望它将旧的上传文件与新的文件结合起来，例如（image_1.jpg，image_2.jpg，image_3.jpg，image_4.jpg，image_2.jpg，image_3.jpg，image_4。 jpg, image_5.jpg,),

有什么办法吗？ 对不起这里的新手

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

您的帮助将不胜感激

Answer 1

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>

请检查代码，i 的值总是“0”，所以使用外部数字值可以将图像放在不同的div。

也检查更新的小提琴fiddle

谢谢