js 使用ajax进行文件上传并获取上传进度案例

WEB前端 waitig 456℃ 百度已收录 0评论

效果

这里写图片描述

由于我给进度添加了一个动画,所以会有零点几秒的延迟

代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #progress{
            height:10px;
            width:500px;
            border: 1px solid gold;
            position: relative;
            border-radius: 5px;
        }
        #progress .progress-item{
            height:100%;
            position: absolute;
            left:0;
            top:0;
            background: chartreuse;
            border-radius: 5px;
            transition: width .3s linear;
        }
    </style>
</head>
<body>
文件上传框<br>
<input type="file" id="file"><br>
显示进度条<br>
<div id="progress">
    <div class="progress-item"></div>
</div>
上传成功后的返回内容<br>
<span id="callback"></span>
</body>
<script>
    //首先监听input框的变动,选中一个新的文件会触发change事件
    document.querySelector("#file").addEventListener("change",function () {
        //获取到选中的文件
        var file = document.querySelector("#file").files[0];
        //创建formdata对象
        var formdata = new FormData();
        formdata.append("file",file);
        //创建xhr,使用ajax进行文件上传
        var xhr = new XMLHttpRequest();
        xhr.open("post","/");
        //回调
        xhr.onreadystatechange = function () {
            if (xhr.readyState==4 && xhr.status==200){
                document.querySelector("#callback").innerText = xhr.responseText;
            }
        }
        //获取上传的进度
        xhr.upload.onprogress = function (event) {
            if(event.lengthComputable){
                var percent = event.loaded/event.total *100;
                document.querySelector("#progress .progress-item").style.width = percent+"%";
            }
        }
        //将formdata上传
        xhr.send(formdata);
    });
</script>
</html>

解析

  • 这里面首先使用的html5的新特性formdata,将获取的到的文件保存到这个实例化对象内,就可以使用ajax进行提交了
        var formdata = new FormData();
        formdata.append("file",file);
        。。。。
        xhr.send(formdata);
  • 然后,按正常的我们实例化了一个XMLHttpRequest对象,用于ajax上传
  • 重点在于最后一步,我们给实例化对象xhr的属性xhr.upload.onprogress赋值了一个回调函数,在回调event里面,我们能获取到相关的信息如下:
属性类型描述
lengthComputable布尔指定传输的总大小是否已知。只读。
loaded无符号长(长)自操作开始以来传输的字节数。这不包括头文件和其他开销,而只包含内容本身。只读。
total无符号长(长)操作期间将传输的内容的总字节数。如果总大小未知,则该值为零。只读。

如上,首先我们先判断了一下是否能获取到传输的总大小

            if(event.lengthComputable){
                ....
            }

然后通过获取loaded除以total获取当前的进度,赋值dom即可。


本文由【waitig】发表在等英博客
本文固定链接:js 使用ajax进行文件上传并获取上传进度案例
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)