Image preview before upload with javascript & jquery

Published Date: 25-Nov-2017 | Tags: JQuery  Javascript  Image Upload  

This tutorial I want to show you how to preview image on client side before uploading to the server by using javascript FileReader and jquery.

It is simple. Just create a html file with content as below.

<!DOCTYPE html>
    <title>Client Side Image Preview</title>
<body style="background: lightgrey">
    <img id="preview" src="noimage.jpg" width="350px" height="320px"/><br/>
    <input type="file" id="image" style="display: none;"/>
    <!--<input type="hidden" style="display: none" value="0" name="remove" id="remove">-->
    <a href="javascript:changeProfile()">Change</a> |
    <a style="color: red" href="javascript:removeImage()">Remove</a>
<script src=""></script>
    function changeProfile() {
    $('#image').change(function () {
        var imgPath = this.value;
        var ext = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
        if (ext == "gif" || ext == "png" || ext == "jpg" || ext == "jpeg")
            alert("Please select image file (jpg, jpeg, png).")
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
//              $("#remove").val(0);
    function removeImage() {
        $('#preview').attr('src', 'noimage.jpg');
//      $("#remove").val(1);

Note: The hidden field is important to use with server side. It is useless for now.

Then just double click on the file to run, you will see the screen as below.

client side image preview before upload

Hope you can do it.

Demo Download

Related Posts

© 2018 All Rights Reserved.