ajax上传文件进度条

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document&lt...

Jason–json

215人浏览 · 2020-04-12 16:47:16

Jason–json · 2020-04-12 16:47:16 发布

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="file" class="myfile">
    进度: <progress value="0" max="100"></progress>
          <span class="per">0%</span>
    速度: <span class="speed">0b/s</span>
    <button>点击上传</button>
    <button>点击取消</button>

    <script>
        let xhr = new XMLHttpRequest();
        
        let stime;//储存时间
        let sloaded; //储存上传的内容

        let but = document.querySelectorAll("button");
        but[0].onclick =function(){
            let file = document.querySelector(".myfile").files[0]
            let form = new FormData();
            form.append("myfile",file);

            xhr.open("post","/fileUpload")
            xhr.onload = function(){
                console.log(xhr.responseText)
            }
            xhr.upload.onloadstart = function(){
                console.log("开始上传")
                stime = new Date().getTime(); //开始的时间
                sloaded = 0;                  //开始的内容
            }
            xhr.upload.onprogress = function(evt){
                console.log("上传中")
                // 当前文件上传的大小 evt.loaded
                // 需要传输的总大小 evt.total   toFixed()去掉小数点  括号写几就剩余几位小数点
                let percent = ((evt.loaded/evt.total) * 100).toFixed()
                document.querySelector("progress").value = percent;
                // 百分比形式显示进度
                document.querySelector(".per").innerHTML = percent+"%"
                
                // 每段的终点
                let endTime = new Date().getTime();
                // 1时间差 = 结束时间 - 开始时间
                let dTime = (endTime - stime)
                // console.log(endTime)

                // 2.当前时间段内上传的文件大小 = 当前上传大小 - 之前上传的内容
                let dloaded = evt.loaded - sloaded;
                // evt.loaded=1 sloaded=0 
                // evt.loaded=2 sloaded=1   
                // evt.loaded=3 sloaded=2  
                
                // 3.当前速度 = 当前时间段内上传的文件大小 / 时间差
                let speed = dloaded / dTime
   
                stime = new Date().getTime();  //重置当前时间 当一段结束时开始时间就变了
                sloaded = evt.loaded;          //重置储存上传内容

                // 单位
                let unit = "b/s";
                if(speed/1024 > 1){
                    unit = "kb/s";
                    speed = speed / 1024
                }
                if(speed/1024 > 1){
                    unit = "mb/s";
                    speed = speed / 1024
                }
                // 显示到页面                                  保留两位小数   拼接单位
                document.querySelector(".speed").innerHTML = speed.toFixed(3)+unit;
                
            }
            xhr.upload.onload = function(){
                console.log("上传成功")
            }
            xhr.upload.onerror = function(){
                console.log("上传失败")
            }
            xhr.upload.onloadend = function(){
                console.log("上传完成")
            }
            
            xhr.send(form)
        }
            but[1].onclick = function(){
                xhr.abort()  // 取消上传 写到点点击but[0]外面
            }
    </script>

</body>
</html>

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

【计算机视觉】Pixel逐像素分类&Mask掩码分类理解摘要

魔乐社区

计算机视觉（opencv）实战三十二——CascadeClassifier 人脸微笑检测（摄像头）

本文从原理到实现，详细介绍了基于 OpenCV Haar 分类器的人脸与微笑检测：讲解了 Haar 特征和级联检测原理。对代码逐行拆解并解释参数含义。画出完整流程图，帮助理解执行过程。给出了常见问题和优化建议，甚至扩展到深度学习方法。这种方法简单、轻量、实时性好，非常适合入门和小型应用项目。但如果需要更高准确率和更强鲁棒性，建议使用深度学习检测器替代 Haar 分类器。