Hello programmers, i hope that you all doing well. Today i am going to show you how to create jQuery file upload progress bar using ajax and PHP. jQuery File upload progress bar will give huge sense how our file is uploading or not. Using jQuery file upload progress bar it will make more sense for us to understand how file is uploading. See there is no rocket science behind this. It is very simple and you can make it using jquery ajax. Let’s see it using example.
Here we will not use any third party jquery plugin for perform this tutorial. We will use jquery’s own function for create a file upload progress bar. Here we will send file data using jquery ajax functions as shown in the program. See my index.php file.
Index.php
<!DOCTYPE html>
<html>
<head>
<title>Add textfield using jquery</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<!-- Script for Bootstrap JS -->
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<center><h2>File Upload Progressbar Tutorial</h2></center>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<!-- Form data start -->
<form action="/abc.php" method="POST" role="form" id="uploadForm" enctype="multipart/form-data">
<div class="form-group">
<label for="">Choose file </label>
<input type="file" class="form-control" id="new_file" name="new_file" placeholder="Input field">
</div>
<button type="button" id="file_upload" class="btn btn-primary">Upload</button>
</form>
<!-- Form data end -->
<br/>
<div class="progress" style="display:none;">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%;">
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$("#file_upload").click(function() {
var formData = new FormData();
var file = $('input[type=file]')[0].files[0];
formData.append('upload_file',file);
$('.progress').show();
$.ajax({
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
percentComplete = parseInt(percentComplete * 100);
$('.progress-bar').css('width',percentComplete+"%");
$('.progress-bar').html(percentComplete+"%");
if (percentComplete === 100) {
}
}
}, false);
return xhr;
},
url: "abc.php",
type: "POST",
data: formData,
contentType: false,
processData: false,
success: function(result) {
console.log(result);
}
});
});
</script>
</html>
In the above file, you will see that when user choose file and click on the upload button, on that time file upload progress bar will show how many percentage file have been uploaded. This is as simple as send form data using ajax. Here if you see at the javascript code and notice that i use formdata for sending file using ajax. Formdata normally used for sending file using jquery ajax. Here i am sending file data to the abc.php file. You can check file is uploded or not using below code.
abc.php
<?php print_r($_FILES['upload_file']); ?>
Above code will help you to show file detail that was sent by user from index.php file.
Important for you:File upload validation in javascript
I hope that you may like this file upload progress bar with jQuery ajax tutorial. Please share it with your friends. If you have any question regarding this tutorial, Please let me know i will help you to solve that problem. Thank you very much 🙂
