$('#formName').on('submit', function(e){
e.preventDefault();
$.ajax({
url: "file.php",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData: false,
beforeSend: function(){
// do something
},
uploadProgress: function(event, position, total, percentComplete){
// do something
}
})
.done(function(data){
// do something
})
.fail(function(data){
// do something
})
});
In above code, when actual data/statements are processed then beforeSend() & the uploadProgress() function are not working at all. Please help me understand the problem. Might the code structure is wrong or I'm missing few things within this code itsef.
fo reference like js seeenter link description here
$(function() {
var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');
$('form').ajaxForm({
beforeSend: function() {
status.empty();
var percentVal = '0%';
bar.width(percentVal);
percent.html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal);
percent.html(percentVal);
},
complete: function(xhr) {
status.html(xhr.responseText);
}
});
});
<form action="file-echo2.php" method="post" enctype="multipart/form-data">
<input type="file" name="myfile"><br>
<input type="submit" value="Upload File to Server">
</form>
<div class="progress">
<div class="bar"></div >
<div class="percent">0%</div >
</div>
<div id="status"></div>
</div>
First of all, thank you all who responded to my question, I really appreciate that. Now, after coding and testing, testing and coding and on and on and on... I came up with a solution to my own problem. And as an opportunity, I would like to share that with you all. so here its is::
uploadProgress
is not a parameter
of .ajax() method
, so it can't be used as I was trying to use it very first snippet.uploadProgress
for any kind of work to be done like upload/download or whatever. So the answer to the question isxhr: function()
that takes care of all the XMLHttpRequest()
within the jquery
.So, hope it this information may help you in any case. If
YES
Do RATE this ANSWER :D - Have a Great Day!