Простой прогресс «бар» для загрузки изображения - сразу на 100%

Question

Я пытаюсь добавить простой индикатор прогресса/номер в мою загрузку изображения с PHP. Если javascript включен, этот скрипт будет работать, но теперь он сразу показывает 100%, прежде чем все будет загружено, а затем оно покажет, что «изображения обрабатываются», также слишком рано, я думаю.

Что-то должно быть неправильно:

$('form#uploadform').submit(function(){ 
var formdata = $('form#uploadform').serialize(); 
$('p.isloading').show(); 

$.ajax({ 
xhr: function() { 
    var xhr = new window.XMLHttpRequest(); 
    xhr.upload.addEventListener("progress", function (evt) { 
     if (evt.lengthComputable) { 
      var percentComplete = evt.loaded/evt.total; 
      $('#uploadprogress').text(percentComplete * 100 + '%'); 
     } 
    }, false); 
    xhr.addEventListener("progress", function (evt) { 
     if (evt.lengthComputable) { 
      var percentComplete = evt.loaded/evt.total; 
      $('#uploadprogress').text(percentComplete * 100 + '%'); 
     } 
    }, false); 
    return xhr; 
}, 
type: 'POST', 
url: "/upload", 
data: formdata, 
success: function (data) { $('#uploadprogress').text('images are being processed'); } 
}); 
//return false; 
}); 

Я хочу простой способ показать, сколько уже загружено, но мне кажется, что я делаю неправильно. Любая помощь приветствуется.

Answer 1

Этот ответ был на ссылку, предоставленную @Amarnadh Meda.

JavaScript -

$(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); 
    } 
}); 
}); 

HTML -

<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> 

Edit # 1:

Найдено подобный вопрос здесь. File upload progress bar with jQuery