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

2017-10-30 11:48:02来源:CSDN作者:qq_30100043人点击

分享

效果

这里写图片描述

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

代码

<!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即可。

注意

本效果必须需要后台进行配合,设置接收文件的后台接口,本人使用的node的express框架实现的地址点这里,还有express框架的安装流程点这里

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台