Ajax File Upload with Progress Bar

Hello friends, In this post you’ll learn how to create Ajax File Upload with Progress bar. In my previous blog I show you how to create simple guestbook using ajax. Ajax file uploader is useful web tool, which is actually very easy to create with Ajax, jQuery and PHP. The example we’re going to use supports uploading single file in a single request. The script will upload a file to the server, show a progress bar highlighting how much has been completed, and then finally return the uploaded file file and the status.

Before creating Ajax File Upload application we need to know the usage of jQuery Form Plugin. I use this plugin to submit the form. Lets build the application. If you want to use Ajax File Upload application you need three simple steps. First create the html form, second create custom.js file where you put the custom jQuery for run the script and at last create a upload_file.php file, using this file you move your image into a folder. But create a upload folder into your directory for saving the images.



Step1:Create html markup and include main js, jQuery Form Plugin js and custom js

At first when you view the html form upload button is initially disable. After upload an image it will enable and then you click on upload button. Here I write a simple jQuery for this. Ajax File Upload form is well commented so please read the comment. It will help you to integrate it with your website.

<!doctype html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<!-- All the jQuery event are writen in custom.js file -->
<script src="custom.js"></script>
<style>
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }
#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;}
</style>
</head>
<body>
<h1>Ajax File Upload Demo</h1>

<form id="myForm" action="upload_file.php" method="post" enctype="multipart/form-data">
     <input id="file" type="file" size="60" name="file">
     <input id="submit" type="submit" value="Upload" disabled="disabled">
 </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>

</body>

</html>

Step2: Create custom.js file

The file is well commented. I think you will understand all the code easily.

$(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);

});

Step3: Create upload_file.php

Simply paste the below code into upload_file.php

<?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"]; 
	 } 
} 

?>

Now you are done download the code and try it your home.

Demo
Download

Spread the love
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •