silvercity silvercity - 2 months ago 25
HTML Question

How to preview multiple images before upload?

I have a page with four images for the user to select. I want the user to be able to preview each image on the site before upload.

The JavaScript code below works for only one image but I would like it to work for multiple images uploaded via

<input type="file">
.

What will be the best way to do this?

function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();

reader.onload = function (e) {
$('#output').attr('src', e.target.result);
}

reader.readAsDataURL(input.files[0]);
}
}

$("#file-input").change(function () {
readURL(this);
});

Answer

Here is jQuery version for you. I think it more simplest thing.

$(function() {
    // Multiple images preview in browser
    var imagesPreview = function(input, placeToInsertImagePreview) {

        if (input.files) {
            var filesAmount = input.files.length;

            for (i = 0; i < filesAmount; i++) {
                var reader = new FileReader();

                reader.onload = function(event) {
                    $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
                }

                reader.readAsDataURL(input.files[i]);
            }
        }

    };

    $('#gallery-photo-add').on('change', function() {
        imagesPreview(this, 'div.gallery');
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="file" multiple id="gallery-photo-add">
<div class="gallery">

Comments