AJAX File Upload jQuery Tutorial covers how to upload files asynchronously using jQuery Framework. I have used jQuery Form plugin for ajax file upload.
Before starting the tutorial, we need to know the usage of jQuery Form Plugin.
jQuery Form Plugin Usage:
$('#myForm').ajaxForm(function() { alert("Form is submitted"); }); //where myForm is the form id
We can even provide options to ajaxForm to get callbacks like success,error, uploadProgress and beforeSend.
var options = { beforeSend: function() { }, uploadProgress: function(event, position, total, percentComplete) { }, success: function() { }, complete: function(response) { //response text from the server. } }; $('#myForm').ajaxForm(options);
beforeSend : this function called before form submission
uploadProgress : this function called when the upload is in progress
success : this function is called when the form upload is successful.
complete: this function is called when the form upload is completed.
Client Side Code
1) Below is the simple HTML form which handles file uploads .
<form id="myForm" action="upload.php" method="post" enctype="multipart/form-data"> <input type="file" size="60" name="myfile"> <input type="submit" value="Ajax File Upload"> </form> <div id="progress"> <div id="bar"></div> <div id="percent">0%</div > </div> <br/> <div id="message"></div>
2) Add jQuery and Form Plugin scripts in the head tag.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="http://malsup.github.com/jquery.form.js"></script>
3) When the document is loaded, initialize the ajax form.
$(document).ready(function() { var options = { beforeSend: function() { $("#progress").show(); //clear everything $("#bar").width('0%'); $("#message").html(""); $("#percent").html("0%"); }, uploadProgress: function(event, position, total, percentComplete) { $("#bar").width(percentComplete+'%'); $("#percent").html(percentComplete+'%'); }, success: function() { $("#bar").width('100%'); $("#percent").html('100%'); }, complete: function(response) { $("#message").html("<font color='green'>"+response.responseText+"</font>"); }, error: function() { $("#message").html("<font color='red'> ERROR: unable to upload files</font>"); } }; $("#myForm").ajaxForm(options); });
Putting It All Together: upload.html
<!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> <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%; } </style> </head> <body> <h1>Ajax File Upload Demo</h1> <form id="myForm" action="upload.php" method="post" enctype="multipart/form-data"> <input type="file" size="60" name="myfile"> <input type="submit" value="Ajax File Upload"> </form> <div id="progress"> <div id="bar"></div> <div id="percent">0%</div > </div> <br/> <div id="message"></div> <script> $(document).ready(function() { var options = { beforeSend: function() { $("#progress").show(); //clear everything $("#bar").width('0%'); $("#message").html(""); $("#percent").html("0%"); }, uploadProgress: function(event, position, total, percentComplete) { $("#bar").width(percentComplete+'%'); $("#percent").html(percentComplete+'%'); }, success: function() { $("#bar").width('100%'); $("#percent").html('100%'); }, complete: function(response) { $("#message").html("<font color='green'>"+response.responseText+"</font>"); }, error: function() { $("#message").html("<font color='red'> ERROR: unable to upload files</font>"); } }; $("#myForm").ajaxForm(options); }); </script> </body> </html>
For Multiple File Uploads check this: https://hayageek.com/docs/jquery-upload-file.php
Server Side
Below is the sample PHP code, which handle file uploads. upload.php
<?php //upload.php $output_dir = "uploads/"; if(isset($_FILES["myfile"])) { //Filter the file types , if you want. if ($_FILES["myfile"]["error"] > 0) { echo "Error: " . $_FILES["file"]["error"] . "<br>"; } else { //move the uploaded file to uploads folder; move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir. $_FILES["myfile"]["name"]); echo "Uploaded File :".$_FILES["myfile"]["name"]; } } ?>