How to preview selected pictures with jquery?

Question

How can I get src of my selected pictures from a multiple file input.

This is my actual code, it uses lorempicsum for design purpose:

$('#multiple-files').on('change', function() {
    console.log(this.files); // I get all my files properly.

    for (var i = 0; i < this.files.length; i++) {
        var image_path = 'http://lorempicsum.com/futurama/460/460/' + (i+1);
        $('#files').append('<img src="'+ image_path +'" class="img-rounded img-responsive">')
    }
});

And this is my form:

<form method="POST" action="http://localhost:8000/upload" accept-charset="UTF-8" id="upload-image" enctype="multipart/form-data">
    <div id="browse" class="btn btn-primary btn-lg btn-block">
        <span class="glyphicon glyphicon-picture"></span>  Select pictures
    </div>

    <input multiple="multiple" id="multiple-files" accept="image/*" name="file[]" type="file">

    <div id="files">

    </div>

    <div style="display: none;" class="row" id="form-buttons">
        <div class="col-xs-6">
            <input class="btn btn-warning btn-lg btn-block" id="reset" value="Reset" type="reset">
        </div>
        <div class="col-xs-6">
            <input class="btn btn-success btn-lg btn-block" value="Upload" type="submit">
        </div>
    </div>
</form>

Thanks in advance.

EDIT

Here is a screenshot: http://i.imgur.com/8Dy4ZAp.png

You can't, a fake pathname is used so you can't include the image directly, you have to use the fileReader, convert to base64, and then use that. — adeneo, Apr 20 '14 at 14:00
You cant set image src To Image in Computer. You do one thing.As soon the image is selected ,upload it to server via AJAX ,and then access via your Serverside language like PHP — Pratik, Apr 20 '14 at 14:06
I never use the fileReader or made conversion into base64 ... Someone to help me? I don't want to upload first. Only check the selected pictures in an elegant way. — user3551444, Apr 20 '14 at 14:06
You want to show IMAGE preview as soon as file uploads by client? — Pratik, Apr 20 '14 at 14:07

score 0 · Answer 1 · edited May 23 '17 at 10:32

0

Use file reader

You can get beautiful answer here Preview an image before it is uploaded

Use following code

<body>
<form id="form1" runat="server">
    <input type='file' id="imgInp" />
    <img id="blah" src="#" alt="your image" />
</form>

<script type='text/javascript'>
function readURL(input) {

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

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

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

$("#imgInp").change(function(){
    readURL(this);
});</script>
</body>

Try the fiddle http://jsfiddle.net/LvsYc/

edited May 23 '17 at 10:32

Community

1
1

answered Apr 20 '14 at 14:10

Pratik

10,715
5
33
69

How to combine this script with mine? I need to append the img element with its correct DataURL for each file in files[]. – user3551444 Apr 20 '14 at 14:26
You mean You want to append multiple images ? – Pratik Apr 20 '14 at 14:30
Yes for each picture in files[], I need to append an img element inside my #files div. – user3551444 Apr 20 '14 at 14:33
Thanks! I added a screenshot (with comments) at the end of my question. – user3551444 Apr 20 '14 at 14:54

score 0 · Accepted Answer · answered Apr 20 '14 at 14:48

Just iterate and convert to base64, then insert the image tags

$('#multiple-files').on('change', function (e) {
    $.each(e.target.files, function(_, file) {
        var reader = new FileReader();

        reader.onload = function (ev) {
            var img = $('<img />', {src : ev.target.result});
            $('#files').append(img);
        }

        reader.readAsDataURL(file);
    });
});

FIDDLE

How to preview selected pictures with jquery?

2 Answers2