Attach progressbar in existing upload button - php

Question

I have a browse button by which user can browse file upto 100 mb. But the problem is, it is uploading the attch file when user submitting the form. And it is not showing in anywhere that how much file uploaded. I want to show it with a progressbar.
U can visit my site http://historikindia.com/contact_us.php.
Please help me to do it. It is now sending attachment to my email. but i need to show user the progressbar otherwise they may think that it is not responding properly (for large file upload).

Answer 1

Here is the code from ajax uploader which updated a status bar. You need to have an html5 progress bar in your html page for it to work.
function progressHandlingFunction(e){
if(e.lengthComputable){
$('progress').attr({value:e.loaded,max:e.total});
}
}
$('#btnupload').click(function(){
var formData = new FormData(document.getElementById('fileupload'));
$.ajax({
url: 'upload.php', //server script to process data
type: 'POST',
xhr: function() { // custom xhr
myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){ // check if upload property exists
myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // for handling the progress of the upload
}
return myXhr;
},
//Ajax events
beforeSend: function (e) { return true; },
success: function (json) { return true; },
error: function (json) { return false; },
// Form data
data: formData,
dataType: "json",
//Options to tell JQuery not to process data or worry about content-type
cache: false,
processData: false
});
});
html5 progress bar looks like this
<progress value="1" max="100"></progress>