Preview an image before upload on server


Posted on 10 Aug 15 by Vickey

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 ()
	    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) {
	            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 :)