Track ajax post progress for fileupload using jquery ajax and FormData
11,315
Note the comment with @TODO
//start the ajax
return $.ajax({
//this is the php file that processes the data and send mail
url: url,
//POST method is used
type: type,
//pass the data
data: data,
//Do not cache the page
cache: false,
//@TODO start here
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;
},
//@TODO end here
// DO NOT set the contentType and processData
// see http://stackoverflow.com/a/5976031/80353
contentType: false,
processData: false,
Add a standalone function that updates the progress.
function updateProgress(evt) {
console.log('updateProgress');
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
console.log(percentComplete);
} else {
// Unable to compute progress information since the total size is unknown
console.log('unable to complete');
}
}
From https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest > Monitoring progress
Author by
Kim Stacks
I build end-to-end workflow solutions to process data such as BOQ (Bill of Quantities) for businesses in telecomms, civil engineering, and construction.
Updated on June 18, 2022Comments
-
Kim Stacks almost 2 years
var files = []; $(document).ready(function (){ dropArea = document.getElementById("droparea"); }); // when we drag and drop files into the div#droparea dropArea.addEventListener("drop", function (evt) { files = evt.dataTransfer.files; }, false); function uploadFiles(stepX) { var url = "/ajax/uploadfiles.php"; var type = "POST"; if (files.length > 0) { var data = new FormData(); // we use FormData here to send the multiple files data for upload for (var i=0; i<files.length; i++) { var file = files[i]; data.append(i, file); } //start the ajax return $.ajax({ //this is the php file that processes the data and send mail url: url, //POST method is used type: type, //pass the data data: data, //Do not cache the page cache: false, // DO NOT set the contentType and processData // see http://stackoverflow.com/a/5976031/80353 contentType: false, processData: false, //success success: function (json) { //if POST is a success expect no errors if (json.error == null && json.result != null) { data = json.result.data; // error } else { alert(json.error); } } }); } return {'error' : 'No files', 'result' : null}; }
How do I track the progress of the file upload if I want to retain this method to upload files to server?