2013-08-19 4 views
4

Я пытаюсь сделать загрузчик файлов с HTML5 с индикатором прогресса. Вот мой код:XMLHttpRequest upload.onprogress мгновенно завершается

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test Progress Meter</title> 
    <script type="text/javascript"> 

     function submitFile(){ 
      var blobOrFile = document.getElementById("fileInput").files[0]; 

      var xhr = new XMLHttpRequest(); 

      xhr.onload = function(e) { 
       alert("finished!"); 
      }; 

      xhr.upload.onprogress = function(e) { 
       if (e.lengthComputable) { 
        document.getElementById("statusBox").innerHTML = e.loaded + "/" + e.total; 
       } 
      }; 

      xhr.open('POST', 'test.php', true); 

      xhr.send(blobOrFile); 
     }; 


    </script> 
</head> 
<body> 
    <input type="file" id="fileInput" onchange="submitFile();" /> 
    Status: <span id="statusBox"></span> 
</body> 
</html> 

В принципе, на все мои браузеры, когда я выбираю файл для загрузки, срабатывает событие прогресса и сразу же показывает все передачи в комплекте. Затем он сидит там, пока файл фактически загружается, и в зависимости от файла, после нескольких секунд/минут, сценарий предупреждает и показывает правильный ответ с сервера.

Я пропустил что-то очевидное? Насколько я вижу, это происходит во всех моих браузерах (IE10, Chrome 28, FF22).

+1

Есть ли у вас обновления? – abernier

+0

Любое решение? – jamesxiang

ответ

1

это мой код, и это отлично работает для меня:

xhr.upload.onprogress = function(e){ 
    var done = e.position || e.loaded, total = e.totalSize || e.total 
    var present = Math.floor(done/total*100) 
    document.getElementById('status').innerHTML = present + '%' 
} 
0

У меня была такая же проблема, как у тебя, то я попробовал мою страницу с другого компьютера, все просто прошло нормально, я использовать сетевой дросселирования в Chrome для имитации медленного интернет-соединения, но кажется, что все еще есть что-то отличное от реальной ситуации.

0

Поскольку сервер или шлюз кэшируют данные запроса немедленно, напишите данные файла на диск или в память. На данный момент скорость передачи данных на самом деле составляет 100%. Но логический код сервера еще не завершил обработку файлов, которые просто кэшируются на сервере.

+0

есть ли способ заставить его работать? У меня такая же проблема. – Marco