File uploading with ajax and progressbar - php

Question

I am trying to do file upload using ajax and the file is getting upload properly but the problem is i want to show the progress of file upload.
<input type="file" onchange="fileupload(this)" name="song" class="form-control" id="file">
<div id="uploaded_image"><progress id="progress" style="width: 100%;" value="0" max="100"></progress></div>
function fileupload(filee){
var form_data = new FormData();
form_data.append("file", filee.files[0]);
$.ajax({
url:root+"upload.php",
method:"POST",
data: form_data,
contentType: false,
cache: false,
processData: false,
success:function(data)
{
if(data=='valid'){
$('#uploaded_image').html("Ho gyiii");
}else if(data=='not valid'){
$('#uploaded_image').html("nhi Ho gyiii");
}
}
});
}
How set progress value dynamically?
I found this somewhere and it's not working and i am not able to understand this
$.ajax({
xhr: function() {
var xhr = new window.XMLHttpRequest();
// Upload progress
xhr.upload.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = (evt.loaded / evt.total)*100;
//Do something with upload progress
console.log(percentComplete);
}
}, false);
// Download progress
xhr.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
// Do something with download progress
alert(percentComplete);
}
}, false);
return xhr;
},
url:root+"upload.php",
method:"POST",
data: form_data,
contentType: false,
cache: false,
processData: false,
success:function(data)
{
if(data=='valid'){
$('#uploaded_image').html("Ho gyiii");
}else if(data=='not valid'){
$('#uploaded_image').html("nhi Ho gyiii");
}
}
});

Answer 1

You can try the below example.
Please replace below values to your values
//your div for showing percent
<div class="progress_bar_in"></div>
//start spinner
$.ajax({
type: type,
url: url,
dataType: dataType,
data: data,
contentType: false,
processData: false,
cache: false,
async: true,
timeout: 60000,
success: function (response) {
//stop spinner
$('.progress_bar_in').html('');
},
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
let percentage = Math.round(percentComplete * 100);
console.log(percentage);
progressBar = `${percentage}`;
if(percentage >= 100){
progressBar = `File reached server and Show some msg till we get response from server`;
}
$('.progress_bar_in').html(progressBar);
}
}, false);
return xhr;
},
error: function (xhr) {
$('.progress_bar_in').html('');
},
});