File upload with Progress bar using ajax

File upload with Progress bar using ajax

In this tutorials, we are going to learn how to file upload with progress bar using ajax.  Nowadays there are lot of upload portals and upload websites there. so if we working for websites definitely we have one form with upload images and content. So while we create for user interface is more important in design. Every user wants to upload the big file and look how much time take for upload using progress bar.

This is tutorials for File upload with Progress bar using ajax. now going to the coding part.

Step 1 : Create upload form with file upload input type and named as upload.html or php

<div class="custom_file_upload">
<h3>File Upload Demo</h3>
<form id="myForm" action="upload_file.php" method="post" enctype="multipart/form-data">
     <input id="file" type="file" size="60" class="file" name="file">
    <div class="submit"> <input id="submit" type="submit" value="Upload" disabled="disabled"> </div>
 </form>
<!--- Below code will show the progress bar wirh percentage when user click Upload button-->
 <div id="progress" class="hide">
        <div id="bar"></div>
        <div id="percent">0%</div >
</div>
<br/>

<!-- Below code will show the upload status message -->
<div id="message"></div>
</div>

Step 2 : Create css style for for and named as style.css

body {
	font-family: 'Lucida Grande', 'Helvetica Neue', sans-serif;
	font-size: 13px;
}

div.custom_file_upload {
	width: 230px;
	height: 20px;
	margin: 40px auto;
}

input.file {
	width: 150px;
	height: 20px;
	border: 1px solid #BBB;
	border-right: 0;
	color: #888;
	padding: 5px;
	
	-webkit-border-top-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	
	outline: none;
}

div.submit {
	width: 80px;
	height: 24px;
	background: #7abcff;
	background: -moz-linear-gradient(top,  #7abcff 0%, #60abf8 44%, #4096ee 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee));
	background: -webkit-linear-gradient(top,  #7abcff 0%,#60abf8 44%,#4096ee 100%);
	background: -o-linear-gradient(top,  #7abcff 0%,#60abf8 44%,#4096ee 100%);
	background: -ms-linear-gradient(top,  #7abcff 0%,#60abf8 44%,#4096ee 100%);
	background: linear-gradient(top,  #7abcff 0%,#60abf8 44%,#4096ee 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 );

	display: inline;
	position: absolute;
	overflow: hidden;
	cursor: pointer;
	
	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-bottomright: 5px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	
	font-weight: bold;
	color: #FFF;
	text-align: center;
	padding-top: 8px;
}
div.submit:before {
	content: 'UPLOAD';
	position: absolute;
	left: 0; right: 0;
	text-align: center;
	
	cursor: pointer;
}

div.submit input {
	position: relative;
	height: 30px;
	width: 250px;
	display: inline;
	cursor: pointer;
	opacity: 0;
}

form { display: block; margin: 20px auto; background: #eee; border-radius: 10px;  }
#progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
#bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
#percent { position:absolute; display:inline-block; top:3px; left:48%; }
.hide{display:none;}

Step 3 : create php upload file for create upload folder(directory) where to upload file in location

<?php  
if(isset($_FILES["file"]))
{ 
	 //You can validate the file type, size here. I left the code for you 
	 if ($_FILES["file"]["error"] > 0) 
	 { 
	   echo "Error: " . $_FILES["file"]["error"]; 
	 } 
	 else 
	 { 
	 
	  move_uploaded_file($_FILES["file"]["tmp_name"],'upload/'. $_FILES["file"]["name"]);   
	  echo "Uploaded File :".$_FILES["file"]["name"]; 
	 } 
} 

?>

Step 4: Create JavaScript function for  progress bar option.

$(document).ready(function()
{
	//Enable Upload button
	$('#file').change(function(){
		$('#submit').removeAttr('disabled');
	});
	//Show the progress bat after upload button hit
	$('#submit').change(function(){
		$('#progress').removeClass('hide');
	});
	
	//We can even provide options to ajaxForm to get callbacks like success,error, uploadProgress and beforeSend
    var options = {
	//beforeSend : this function called before form submission
    beforeSend: function()
    {
        $("#progress").show();
        //clear everything
        $("#bar").width('0%');
        $("#message").html("");
        $("#percent").html("0%");
    },
	//uploadProgress : this function called when the upload is in progress
    uploadProgress: function(event, position, total, percentComplete)
    {
        $("#bar").width(percentComplete+'%');
        $("#percent").html(percentComplete+'%');

    },
	//success : this function is called when the form upload is successful.
    success: function()
    {
        $("#bar").width('100%');
        $("#percent").html('100%');

    },
	//complete: this function is called when the form upload is completed.
    complete: function(response)
    {
        $("#message").html("<font color='green'>"+response.responseText+"</font>");
    },
    error: function()
    {
        $("#message").html("<font color='red'> ERROR: unable to upload files</font>");

    }

};
	////where myForm is the form id
     $("#myForm").ajaxForm(options);

});

Step 5 :  create folder in your file directory named as upload.

Thats it. now you can upload a file with progress bar. enjoy the code and subscribe me.