how to create image uploader with preview

Question

I want to have a form, with multiple parts.

The first part would be images, multiple file upload with a preview of the images before actually uploading them.

The second part has various text form fields.

I have the second part built fine and working, using PHP and MySQL, and the image upload is working too. But I don't know how to show a preview of the images before submitting the form.

EDIT:

using code form an answer:

     <input type='file' onchange="readURL(this);" />
     <img id="blah" src="#" alt="your image" />

with:

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

            reader.onload = function (e) {
                $('#blah')
                    .attr('src', e.target.result)
                    .width(150)
                    .height(200);
            };

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

works great, but it only shows 1 thumbnail. I want to create an image thumbnail dynamically for each file.

I'm trying :

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

            reader.onload = function (e) {
          var container = $('#previews');
          var image = $('<img>').attr('src', e.target.result).width(150);
          image.appendTo(container);
            };

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

with:

    <input type='file' name="files[]" onchange="readURL(this);" multiple />
    <div id="previews"></div>

which works, but how do I loop it for each file inputted?

Just add new parameter to the function, like onchange="readURL(this, 0) [or i in a loop], add same identifier to the div of the image bellow the function call input field (like "previews0", or "previews"+$i,;;;;; In js, add the parameter to function name "function readURL(input, k)" and pass it bellow to the image's div id like "previews"+k ;;;;;; You're done. — That Marc, Mar 22 '16 at 08:19

score 1 · Accepted Answer · edited May 23 '17 at 11:45

1

Take a look at that:

http://jsbin.com/uboqu3/1/edit

from this post on stackoverflow: Preview an image before it is uploaded

Lucian

edited May 23 '17 at 11:45

Community

1
1

answered Feb 09 '13 at 20:34

Lucian Depold

1,999
2
14
25

score 0 · Answer 2 · answered Feb 09 '13 at 20:31

0

You cannot show the preview before having the image on the server, except if you use java on the interface

answered Feb 09 '13 at 20:31

phpalix

679
4
8

or flash... but it seems like this is possible nowadays, take a look at my answer ! – Lucian Depold Feb 09 '13 at 20:37

score 0 · Answer 3 · answered Feb 09 '13 at 20:38

0

You can do this using HTML5 canvas and FileReader component

Have a look at js fiddle here

answered Feb 09 '13 at 20:38

Deadlock

1,575
1
19
34

how to create image uploader with preview

3 Answers3