Live image preview before upload to the server using jQuery

  •  
  •  
  •  
  •  
  •  
  •  

Sometimes it is required to verify the selected image before upload it to the server. So, in this tutorial, I will show you how to see live image preview before upload it using jQuery.

Live image preview before upload to the server using jQuery

HTML – live image preview

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style>
.clearfix { clear:both; }
.inputDiv {
  border-bottom:1px solid #000;
  width:400px;
  padding-bottom:5px;
}
label { margin-top:20px; margin-bottom:3px; font-weight:bold;}
#preview
{
  padding-top: 5px;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
  min-height: 400px;
  min-width: 400px;
  display: none;
}
#preview img {
  width:400px;
  height:400px;
}
</style>

<!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>-->
<script type="text/javascript" src="js/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/preview.js"></script>
</head>

<body>
  <div class="inputDiv">
    <label>Upload image : </label>
    <input type="file"  name="uploadImg" id="uploadImg" value="" />
  </div><!-- end of .inputDiv -->	  
  <div id="livePreviewDiv"></div>
</body>
</html>

Create index.php file in the root folder and write the above contents in it. When user will choose an image from the FileBrowseDialog then the live image preview will display within the “preview” div. I used a downloaded version of the jquery.min.js file. You can use the CDN version.

jQuery – live image preview

$(function () {
    $("#uploadImg").change(function () {
        $("#preview").html("");
        var regex_pattern = /^([a-zA-Z0-9\s_\\.\-:])+(.png|.bmp|.gif|.jpeg|.jpg)$/;
        if (regex_pattern.test($(this).val().toLowerCase())) {
            if ($.browser.msie && parseFloat(jQuery.browser.version) <= 9.0) {
                $("#preview").show().filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = $(this).val();
            } else {
                 if(window.FileReader && typeof(FileReader) != "undefined") {
                    $("#preview").show().append("<img />");
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        $("#preview img").attr("src", e.target.result);
                    }
                    reader.readAsDataURL($(this)[0].files[0]);
                 } else {
                    alert("This browser does not support FileReader.");
                 }
            }
        } else {
            alert("Please upload a valid image.");
        }
    });
});

Create a preview.js file within the js folder and write the above contents in it.  $(“#uploadImg”).change(function () {….}) function will execute when user will select an image. You can restrict image upload by specifying the image extensions. In this case, only “png, bmp, gif, jpg or jpeg” extensions are allowed to upload. Internet explorer less than version 9 does not support FileReader therefore in this scenario we will use filters.item(“DXImageTransform.Microsoft.AlphaImageLoader”).src. For other browsers, we simply append a <img /> tag within preview div and will update the src value. The readAsDataURL method is used to read the contents of the specified file.

Download the full source code and please share the article link to others.

About Mitrajit

Leave a Reply

Your email address will not be published. Required fields are marked *

Prove you are a human *