Add image preview before upload for multiple images

Question

I am trying to add an image preview for each image being uploaded.

I have successfully displayed a list of image names being uploaded, but I cannot figure out how to add the image preview.

Here is what I got so far:

$(document).on('change.bs.fileinput', '.fileinput', function(e) {
    var $this = $(this),
        $input = $this.find('input[type=file]'),
        $span = $this.find('.fileinput-filename');
        $ul = $("div").find('.upload-list');
    if($input[0].files !== undefined && $input[0].files.length > 1) {                
        $span.html('<span>'+$input[0].files.length+' files selected</span>'); 
        $ul.html('<label for="albumImages">Uploading Images</label><ul class="list-group"><li class="list-group-item">' + $.map($input[0].files, function(val) { return val.name; }).join('</li><li class="list-group-item">') + '</li></ul>');
        $('.upload-list').show();
        $('.album-inputs').show();
    } else {
        $('.upload-list').hide();
        $('.album-inputs').show();
    }
});

I want to add the image to the left of the name. Can someone guide me in the right direction?

Possible duplicate of [Preview an image before it is uploaded](http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded) — Patrick Evans, Apr 24 '16 at 01:16
@PatrickEvans I tried this and it does not work. Also, is that for multiple images? — iamthestreets, Apr 24 '16 at 01:18
Then you didnt implement it correctly. Did you check for errors when trying it? The example shows how to do one, to do multiples you just do it in a loop — Patrick Evans, Apr 24 '16 at 01:21

score 0 · Answer 1 · answered Apr 24 '16 at 01:16

0

Create an img tag and put the src inside it with the corresponding photo

answered Apr 24 '16 at 01:16

xagos

88
10

score 0 · Answer 2 · answered Apr 25 '16 at 23:27

Based on the comment of @PatrickEvans I was able to find a solution. Here is what I did:

window.URL    = window.URL || window.webkitURL;
var elBrowse  = document.getElementById("upload_image"),
    elPreview = document.getElementById("upload_list"),
    useBlob   = false && window.URL; // `true` to use Blob instead of Data-URL

function readImage (file) {
    var reader = new FileReader();

    reader.addEventListener("load", function () {
        var image  = new Image();           

        image.src = useBlob ? window.URL.createObjectURL(file) : reader.result;

        image.addEventListener("load", function () {
            var imageInfo = '<img src="'+image.src+'" class="img-rounded"/>'+' '+
                            file.name    +' '+                                  
                            image.width  +'×'+
                            image.height +' '+
                            file.type    +' '+
                            Math.round(file.size/1024) +'KB';
            //elPreview.appendChild( t );
            elPreview.insertAdjacentHTML("beforeend", '<ul class="list-group"><li class="list-group-item">'+imageInfo +'</li></ul>');
        });         

        if (useBlob) {
            window.URL.revokeObjectURL(file); // Free memory
        }
    });

    reader.readAsDataURL(file);

}

elBrowse.addEventListener("change", function() {
    var files  = this.files;
    var errors = "";

    if (!files) {
        errors += "File upload not supported by your browser.";
    }

    if(files.length > 1) { 
        alert(files.length);             
        $('.fileinput-filename').html('<span>'+files.length+' files selected</span>');
    }

    if (files && files[0]) {
        for(var i=0; i<files.length; i++) {
            var file = files[i];
            if ( (/\.(png|jpeg|jpg|gif)$/i).test(file.name) ) {
                readImage( file ); 
            } else {
                errors += file.name +" Unsupported Image extension\n";  
            }
        }
    }

    if (errors) {
        alert(errors); 
    }
});

My only problem now is when I want to change the images it keeps the original images on the page.

Add image preview before upload for multiple images

2 Answers2