- "JQUERY AJAX FORM " provides Asynchronous File upload feature.
- The plugin can be found in the below link:-
http://malsup.com/jquery/form/#download
- To know about basics of this plugin checkout my previous post where i have shown a demo for asynchronous form upload.
- In This Demo, "We will see a File upload with a BOOTSTRAP progress bar indicator".
- Some of the facts of this demo:-
---- Used WAMP Server for deploying the Demo.
---- A BLANK dummy php file(dummy-file-upload.php) for target of file upload.
---- BOOTSTRAP for styling and progress bar indicator.
- The Demo directory structure is as below:-
- This plugin provides a method called "uploadProgress" with 4 parameters:-
event : shows the Progress bar event.
position : The current position of uploading file.
total : Total File Size.
percentComplete :Uploaded file in percent.
- The HTML markup for bootstrap panel and file upload form is as below.
<!DOCTYPE html> <html> <head> <title>Jquery AjaxForm With Bootstrap Style</title> <link rel="stylesheet" href="./css/bootstrap.min.css"> <link rel="stylesheet" href="./css/my-style.css"> </head> <body> <form action="dummy-file-upload.php" id="my-detail-form" method="post" enctype="multipart/form-data"> <!--Bootstrap Panel Markup :start --> <div class="panel panel-info ts-file-panel"> <div class="panel-heading"> <h3 class="panel-title">Ajax File Upload With Bootstrap</h3> </div> <div class="panel-body"> <input name='filename' type="file" placeholder="Browse File."> <button type="submit" class="btn btn-info">UPLOAD</button> </div> <div class="panel-footer"> <p class="text-left text-info"> This Demo is For Asynchronous File upload using Ajax Form PlugIn. CSS styles are done using Bootstrap Library. <p> <div class="ts-hidden-bar"> <!--Bootstrap Progressbar Markup :start --> <div class="progress progress-striped active "> <div class="progress-bar" role="progressbar" style="width: 0%"> <span class="sr-only">0% Complete</span> </div> </div> </div> <span class="ts-file-size"></span> <span class="ts-file-completed"></span> <!--Bootstrap Progressbar Markup :end --> <!--Bootstrap Alert Markup :start --> <div class="alert alert-warning my-message-error"> <a href="#" class="alert-link">...</a> </div> <!--Bootstrap Alert Markup :end --> </div> </div> <!--Bootstrap Panel Markup :end --> </form> <script src="lib/jquery-1.10.1.min.js"></script> <script src="lib/jquery.form.min.js"></script> <script src="my-form-script.js"></script> </body> </html>
- The javascript file for validation and uploading file is as bellow,
/**
* Created by saan on 10/6/13.
*/
var TS_AJAX_FORM ={
/*ERROR Message Display Element Reference*/
MY_MESSAGE_ERR : $(".my-message-error"),
/*SUCCESS Message Display Element Reference*/
MY_MESSAGE_SUC : $(".my-message-success"),
/*Shows the input message and hides it in 5 seconds*/
showMessage:function(msg, type){
var message = (type === 'ERR')? this.MY_MESSAGE_ERR : this.MY_MESSAGE_SUC,
txt = $(message).find('a');
$(txt).html(msg);
message.fadeIn('fast',function(){
message.fadeOut(5000);
})
},
/*
*Handler: success, Once the form is submitted and response
*arrives, it will be activated.
*/
successHandler: function(responseText, statusText, xhr, form){
$('.ts-file-panel .progress-bar').width('100%');
$('.ts-hidden-bar').delay(1000).fadeOut('fast')
},
/*
*responseText, statusText, xhr, $form: beforeSubmit, for validation Let, title and roll is your required field.
*Let's show an error message if these fields are blank.
*/
beforeSubmitHandler:function(arr, form, options){
var isValid = true;
$.each(arr,function(index, aField){
if('filename' === aField.name && aField.value === ""){
TS_AJAX_FORM.showMessage("Please Select a File.", "ERR");
isValid = false;
}
});
if(isValid){
$('.ts-hidden-bar').fadeIn();
}
return isValid;
},
handleUploadProgress: function(event, position, total, percentComplete ){
$('.ts-file-panel .progress-bar').width(percentComplete+'%');
$('.ts-file-size').html((total/(1024*1024))+'MB');
$('.ts-file-completed').html('Position'+position+' event '+event);
},
/*Initializing Ajax Form*/
initMyAjaxForm:function(){
$("#my-detail-form").ajaxForm({
beforeSubmit:this.beforeSubmitHandler,
success:this.successHandler,
clearForm:true,
uploadProgress:this.handleUploadProgress
});
}
};
/*My Small Tutorial: Execution point*/
$(document).ready(function(){
TS_AJAX_FORM.initMyAjaxForm()
});
- The initial rendering of the panel is as below:-
- The Firebug markup inspection shows the form element using multipart for file upload.The screenshot for this is as below,
- When no file is selected and upload button is pressed a validation error message will be shown at the footer of the panel.The screenshot for this as below,
- When a file is browsed and selected it will look like below screen,
- Below screenshot shows the file upload is on going/inprogress ,
- The Firebug inspection on file upload screenshot as below,
- The Firebug console for POST HEADER screenshot as below,
- Demo code Download Link:-