jQuery File upload progress bar with file size validation
In this article, you learn how to show progress bar of the uploaded file in percentage using HTML, jQuery and Ajax. The file upload progress bar helps the user to know the current upload progress of uploaded file. As without this, it will become very difficult to know how much file has uploaded in the background or what process is happening in the background. This becomes very confusing if the user will upload large file because they will have to wait a long without any current status. So it is very helpful for the user, if the developer will provide functionality to show the uploaded file progress bar in the percentage using best UI.
Here, we have created simple HTML, jQuery and Ajax based file upload progress bar in the HTML upload form. For this, first we have created an HTML form and included the bootstrap and jQuery file libraries. With the help of jQuery, we have validated the uploaded file size.
var file = $('input#file')[0].files[0].size;
file = file/1024; file = file/1024;
if(file > 10) {
$('#file_error').html('Fize Size is greater than 10 MB');
return false;
}In the above code, the file variable contains the total file size of the uploaded file, then convert them into MB. If the total file size is greater than 10MB, then it returns FALSE otherwise proceed the file uploading and call the uploadform() function.
The uploadform() function contains the progress bar script. The code within -
beforeSend: function(xhr) {
...
},set the css properties of progress bar and the code within -
uploadProgress: function(event, position, total, percentComplete) {
...
},shows the progress bar percentage.
Complete Code: jQuery File upload progress bar with file size validation
<!DOCTYPE html>
<html>
<head>
<title>JQuery File upload progress bar with file size validation</title>
<style type="text/css">
#file_error{ color: red; }
#bar{ width:0%; margin:4px 0; height:32px; background-color:#4298c8; }
#percent{ text-align: center; color: #fffff;}
#status{ color:#ffffff; }
.form-field{ padding: 5px;}
#loader{ display: none; position: absolute; z-index: 9999; padding-top: 80px; padding-left: 25%;}
.formblock{ border:3px solid #892525; border-radius: 4px; width: 400px; margin: 30px auto; padding:4px;}
#cfsubmit { background: #892525; border-radius: 3px; color: #fff; padding: 3px 7px;}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.min.js"></script>
<script type="text/javascript">
$(function() {
$(document).ready(function(){
$('#cfsubmit').click(function(){
if($('input#file').val() != undefined) {
var file = $('input#file')[0].files[0].size;
file = file/1024; file = file/1024;
if(file > 10) {
$('#file_error').html('Fize Size is greater than 10 MB');
return false;
} else {
$('#file_error').hide();
uploadform();
}
}
});
});
});
function uploadform(){
var bar = $('#bar');
var percent = $('#percent');
var status = $('#statusbar');
$('form').ajaxForm({
beforeSend: function(xhr) {
$("div.container").css({"opacity": "0.5"});
$("div#loader").show();
status.empty();
var percentVal = '0%';
bar.width(percentVal);
percent.html(percentVal);
$(".container").css({"opacity": "1"});
$(".container").css({"background": "none"});
$("div#loader").hide();
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
$('#percent').html(percentVal);
$('#bar').width(percentVal);
},
complete: function(xhr) {
window.location = "index.php?msg=success"
}
});
}
</script>
</head>
<body>
<div class="formblock" style="opacity: 1;">
<div id="loader">
<center><img src="loading.gif" width="100px" height="100px" ></center>
</div>
<?php
if($_GET['msg']== 'success'){
echo 'Form submitted successfully.';
}
?>
<form action="" method="post" enctype="multipart/form-data">
<div class="form-field">
<label for="name" class="col-xs-4 col-form-label" >Name: </label>
<input type="text" name="c_name" value="" />
</div>
<div class="form-field">
<label for="example-text-input" class="col-xs-4 col-form-label" >Age: </label>
<input type="number" name="age" value=""/>
</div>
<div class="form-field">
<label for="example-text-input" class="col-xs-4 col-form-label" >Upload File: </label>
<input type="file" name="file[]" id="file"/>
</div>
<div id="file_error"></div>
<div id="bararea">
<div id="bar">
<div id="percent"></div>
</div>
</div>
<div id="statusbar"></div>
<div class="form-field">
<label for="example-text-input" class="col-xs-4 col-form-label" ></label>
<input type="submit" name="submit" id="cfsubmit" value="Submit"/>
</div>
</form>
</div>
</body>
</html>Related Articles
JavaScript display PDF in the browser using Ajax calljQuery loop over JSON result after AJAX Success
Simple star rating system using PHP, jQuery and Ajax
jQuery File upload progress bar with file size validation
Print section of page using javascript
Submit a form data without page refresh using PHP, Ajax and Javascript
How to Retrieve Emails from Gmail using PHP IMAP
How to store Emoji character in MySQL using PHP
How to show street view on google map
Get current visitor's location using PHP
