个人中心
gpt4 book ai didi

upload - XMLHttpRequest upload.onprogress 立即完成

转载 作者：行者123 更新时间：2023-12-02 06:48:14 27 4
gpt4 key购买 nike

我正在尝试使用 HTML5 制作一个带有进度表的文件 uploader 。这是我的代码:

<!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)上。

最佳答案

这是我的代码，它对我来说工作得很好:

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

关于upload - XMLHttpRequest upload.onprogress 立即完成，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18310038/

27 4 0
文章推荐： opengl - OpenGL 和 GLSL 中的 glTexParameter 和过滤？
文章推荐： r - 向 x 轴添加嵌套/分组级别
文章推荐： elixir - => 和 : in an Elixir map? 有什么区别
文章推荐： haskell - 什么是协变仿函数？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com