Question

我正在构建一个可以手动上传jquery上传的Web应用程序，而不是使用任何库，所以情况是，当我上传多个时，例如：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_5.jpg，），

有什么办法吗？抱歉新手在这里

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

您的帮助将不胜感激

Answer 1

＆＃13;

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

＆＃13;

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

＆＃13;

请检查代码，我的值总是得到＆＃34; 0＆＃34; ，所以外部数值可以将图像放在不同的div。

检查更新的小提琴fiddle

由于

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

1 个答案: