Preview an image before upload on server

Jquery

Posted on 10 Aug 15 by Vickey
  3288



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


 
 
 

 

You can download source code here


If this post help you reduce time to develop, you can help me to maintain this website :)
www.000webhost.com