7

我正在尝试使用带有进度表的 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）上。

4

3 回答 3

3

this is my code and it's work fine for me:

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 + '%'
}
于 2014-01-03T07:16:41.027 回答
0

因为服务器或网关立即缓存请求数据，将文件数据写入磁盘或内存。此时，文件数据进度确实是100%。但是服务器的逻辑代码还没有完成对刚刚缓存在服务器中的文件数据的处理。

于 2017-07-18T06:46:09.733 回答
0

我遇到了和你一样的问题，然后我在另一台计算机上尝试了我的页面，一切正常，我确实使用 Chrome 的网络节流来模拟慢速互联网连接，但似乎与实际情况仍有一些不同

于 2016-02-21T11:47:53.617 回答