Jquery Ajax Upload File Function with Progress Bar

$(document).on('click',"#submit_button", function(e) {
e.preventDefault();
var formData = new FormData($("#form_id")[0]);
$.ajax({
url: "do-upload.php",
type: 'POST',
data: formData,
cache: false,
contentType: false,
processData: false,
enctype: 'multipart/form-data',

xhr: function(){
//upload Progress
var xhr = $.ajaxSettings.xhr();
if (xhr.upload) {
xhr.upload.addEventListener('progress', function(event) {
var percent = 0;
var position = event.loaded || event.position;
var total = event.total;
if (event.lengthComputable)
{
percent = Math.ceil(position / total * 100);
}
//update progressbar
$(".progress-bar").css("width", + percent +"%");
$(".status").text(percent +"%");
}, true);
}
return xhr;
},
success: function (mdata) {
if(mdata == 0 ){
alert("Done");
}

},
});
});