XMLHttpRequest upload.onprogress мгновенно завершен

Question

XMLHttpRequest upload.onprogress мгновенно завершен

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

<!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).

7

upload xmlhttprequest

Источник

user2695688 19 авг '13 в 09:03

3 ответа

Другие вопросы по тегам upload xmlhttprequest

user1488657 03 янв '14 в 07:16 2014-01-03 07:16 · Answer 1 · 2014-01-03 07:16

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

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 + '%'
}

3

Источник

user1488657 03 янв '14 в 07:16

user5958480 21 фев '16 в 11:47 2016-02-21 11:47 · Answer 2 · 2016-02-21 11:47

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

user2753051 18 июл '17 в 06:46 2017-07-18 06:46 · Answer 3 · 2017-07-18 06:46

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