Show photo preview uploaded via html form

Question

I have a form that allows users to upload x amount of image. When they choose the images from their computer, there is a button that they can click, which allows them to preview the images before submitting the form.

Is there a way to show the images automatically without having to click a Preview button. At the moment, I am using the JS .click function, but I would rather that users didn't have to click anything to see what images they uploaded.

Here is the code I am using.

In the form:

<div class="uploadWrapper">
    <p>Upload Images</p>
    <input type="file" name="files[]" multiple="true" id="files" style="left: 0px;" />
</div>
<input id="go" class="btn_img" type="button" value="Click to Preview Images">
<div id="images_upload"></div>
<script type="text/javascript">
    $("#files").click(function(){
        $(".btn_img").show();
    });
</script>

<?php include_once('upload/image-preview.php'); ?>

The image-preview.php file:

<script type="text/javascript">
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

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

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

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


var reader = new FileReader(),
    i=0,
    numFiles = 0,
    imageFiles;


function readFile() {
    reader.readAsDataURL(imageFiles[i])
}

reader.onloadend = function(e) {


    var image = $('<img class="prev_img">').attr('src', e.target.result);
    $(image).appendTo('#images_upload');
    $( "#images_upload img" ).wrap( "<div class=\"an_image\">" );


    if (i < numFiles) {
        i++;
        readFile();
    }
};

$('#go').click(function() {

    imageFiles = document.getElementById('files').files

    numFiles = imageFiles.length;
    readFile();           

});
</script>

What would I need to do to not have to click the 'Click to Preview Images' button to see the images?

Thanks!

possible duplicate of [Preview an image before it is uploaded](http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded) — im_brian_d, Sep 07 '14 at 00:19
@brian, thanks for that. I read that post, and i can get one image to work, but not sure how to do it for multiple images. Any ideas? — Eoin H, Sep 07 '14 at 00:45

score 2 · Accepted Answer · answered Sep 07 '14 at 03:54

2

Loop through the input.files and create a new FileReader() for each file. jsFiddle Demo

HTML

<input type='file' class="imageUpload" multiple="true" />
<div class="imageOutput"></div>

JS

$images = $('.images');

$(".imageUpload").change(function(){
    readURL(this);
});

function readURL(input) {

    if (input.files && input.files[0]) {

        $.each(input.files, function() {
            var reader = new FileReader();
            reader.onload = function (e) {           
                $images.append('<img src="'+ e.target.result+'" />')
            }
            reader.readAsDataURL(this);
        });

    }
}

answered Sep 07 '14 at 03:54

im_brian_d

7,772
2
26
43

Spot on! @Brian That did the trick just nicely.. I really do need to start getting to grips with JS. lol. Thank for your help, much appreciated indeed. – Eoin H Sep 07 '14 at 15:17
Actually, @brian i have one more question in relation to the above answer... how to I limit the number times it loops? – Eoin H Sep 07 '14 at 16:01
Like putting an image upload limit? because currently it loops however many images were selected. if they upload 10 and you have a limit of five, it will just cut off the rest. – im_brian_d Sep 07 '14 at 16:57
So you would check it before looping and validate https://www.google.com/#q=input+file+limit – im_brian_d Sep 07 '14 at 16:58

score 0 · Answer 2 · answered Sep 07 '14 at 20:24

Thanks @Brian

This is what I came up with. The limit is 10.

$images = $('#images_upload')

$(".imageUpload").change(function(event){
    readURL(this);
});

function readURL(input) {

    if (input.files[10]) {
        alert('You can uploaded a maximum of 10 images');
    } else {
        if (input.files && input.files[0]) {
            $.each(input.files, function() {
                var reader = new FileReader();
                reader.onload = function (e) {           
                    $images.append('<img src="'+ e.target.result+'" />')
                    }
                    reader.readAsDataURL(this);
                });
            }                                              
        }
    }

Show photo preview uploaded via html form

2 Answers2