简体   繁体   中英

How to preview multiple files on input?

I can select multiple files on input logos and I would like to preview all of it. For the moment I can only display one of those.

I don't know how to loop through each file using this code :

     $(function() {
        $("input[name='cover[logos][]']").on('change', function(event) {
            var files = event.target.files;
            for(i=0; i<files.length; i++){
                var image = files[i]
                var reader = new FileReader();
                reader.onload = function(file) {
                  var img = new Image();
                  img.src = file.target.result;
                  $('#target').html(img);
                  }
                reader.readAsDataURL(image);
             };
        });
    });

Use this

$('#target').append(img);

instead

$('#target').html(img);

For replacing images when user change his input

$('#target').html('');
for(i = 0; i < files.length; i++) {
   //loop code
}

Fiddle

your js is fine just change html to append

$('#target').append(img);

and use

$('#target').html('');

to clear previously chosen

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM