- "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:-