logo标签列表

XMLHttpRequest上传.onprogress瞬间完成

uploadxmlhttprequest
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）。
有什么解决方案吗？ - jamesxiang
3个回答
3

这是我的代码，对我来说运行良好：

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％。但是服务器的逻辑代码尚未完成处理刚刚缓存在服务器中的文件数据。

有没有办法让它工作？我也遇到了同样的问题。 - Marco
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接