Monday 23 December 2013

Show Uploaded Image Preview using JQuery


<style>
    img{
        border: 1px solid #000; 
        padding: 2px;
        border-radius: 5px;
        background: #FFF;
    }
</style>


<input type="file" name="myimage" id="myimage">
<img id="preview" alt="View Image" width="250px" height="250px"/>


<script type="text/javascript">
    $("#myimage").change(function() {
        if (this.files && this.files[0]) {            
            var reader = new FileReader();
            reader.onload = function(e) {
                $('#preview').attr('src', e.target.result);
            }
            reader.readAsDataURL(this.files[0]);
        }
    });
</script>

Demo

No comments:

Post a Comment