Preview an image before upload on server

Html5 provide us an easy way to preview an image before upload it with the help of File API. File API is used for create a thumbnail preview of a image file before sending it to the server.With the help of File API you can get the file size and extension on the client side.Here I have an example code for preview a image before upload.

javascript Code

$( document ).ready(function() {
    $("#imagefile").change(function ()
    {
	    $("#img").show();
	    $("#img").attr("src",'TESTIMG.gif');
	    if (typeof(FileReader)!="undefined"){
	       
	        var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png)$/;
	        $($(this)[0].files).each(function () {
	            var getfile = $(this);
	            if (regex.test(getfile[0].name.toLowerCase())) {
	                var reader = new FileReader();
	                reader.onload = function (e) {
	                     $("#img").attr("src",e.target.result);
	                }
	                reader.readAsDataURL(getfile[0]);
	            } 
	            else {
	                alert(getfile[0].name + " is not image file.");
	                return false;
	            }
	        });
	    }
	     else {
	         alert("Browser does not supportFileReader.");
	     }
    });
});

Html Code