How to preview image before upload in HTML?

Question

I have modified the function

<script>
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]);
    }
}
$("#upload").change(function() {
    readURL(this);
});
</script>

and included this input in my form in the body element:

<input type="file" name="uploaded_files" id="upload"/>
<img id="blah" src="#" alt="your image" />

I have also included jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

It’s working in JsFiddle, but it’s not working on my localhost.

http://stackoverflow.com/questions/18694437/how-to-preview-image-before-uploading-in-jquery — Tanatos, Jul 05 '14 at 11:44

score 2 · Accepted Answer · answered Jul 05 '14 at 12:02

2

There is absolutely nothing wrong with what you have done, neither with your script JS block. You can go and check on this JSFiddle.

Just make sure you are loading the jQuery library correctly since your script depends on.

answered Jul 05 '14 at 12:02

tmarwen

11,491
4
35
54

score 1 · Answer 2 · answered Jul 05 '14 at 11:44

Try Like

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);
});

Demo

How to preview image before upload in HTML?

2 Answers2