8
How to Get File Upload Progress in Ajax using jQuery
source link: https://www.codexworld.com/how-to/get-file-upload-progress-using-jquery-ajax/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
How to Get File Upload Progress in Ajax using jQuery
Progress Bar helps to display the file upload status in real-time. You can get the upload progress in Ajax and show the percentage progress bar using jQuery. The progress bar is very useful to make the file upload process user-friendly.
The following code snippet shows how to get the file upload progress in Ajax and make a progress bar with percentage using jQuery.
- Use
xhr
option in $.ajax() method to handle the progress bar operation. - Create a new
XMLHttpRequest
object using JavaScript window.XMLHttpRequest() method. - The
progress
event of XMLHttpRequestupload
property allows to get the total and loaded length. - Calculate the percentage and handle the process bar.
$.ajax({ xhr: function() { var xhr = new window.XMLHttpRequest(); xhr.upload.addEventListener("progress", function(evt) { if (evt.lengthComputable) { var percentComplete = (evt.loaded / evt.total) * 100; // Place upload progress bar visibility code here } }, false); return xhr; }, type: 'POST', url: "upload.php", data: {}, success: function(data){ // Do something on success } });
Leave a reply
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK