Create live preview of image (before upload it) using JQuery

Question

I want to create a preview for image before upload it on the server, using JQuery.

My code, js code:

$(function(){
    Test = {
        UpdatePreview         


        

Answer 1

If you need it as getting nice effect then you could use flash like they do in https://github.com/mailru/FileAPI

But when i needed to show image to user because i needed to let user select area for croping then i used form inside hidden iframe and uploaded image to server and sent back image data uri so i was able to get data uri and replace image src attribute, then when area was selected i did not send image back as file but as data uri. In old browsers it means you upload image twice, but i did not want to use flash as in some cases flash may also not be installed there.

Answer 2

Instead of

$("img").prop("src", target.result);

write

$("#ImageId").attr("src", target.result);

Where ImageId is the ID of your img tag.

Answer 3

give an id for img tag

<img src="#" id ="frame" alt="test" width="128" height="128" />

for input tag create an event oninput or onchange

<input type='file' name='browse' oninput='UpdatePreview()'/>

<script>    
    function UpdatePreview(){
        $('#frame').attr('src', URL.createObjectURL(event.target.files[0]));
    };
</script>