//创建xhr对象
var xhr = new XMLHttpRequest()
//监听xhr.upload的onprogress事件
xhr.upload.onprogress = function(e){
// e.lengthComputable是一个布尔值,表示当前上传的资源是否有可计算的长度
if (e.lengthComputable){
// 计算出上传的进度
// e.loaded 已传输的字节
// e.total 需传输的总字节
var procentComplete = Math.ceil((e.loaded / e.total) * 100)
console.log(procentComplete);
}
控制台打印结果
想要将效果在页面中显示出来,需要用到Bootstrap中的进度条组件
<div class="progress" style="width: 500px; margin: 15px 10px;">
<div class="progress-bar progress-bar-striped active" style="width: 0%" id="percent">
</div>
</div>
在onprogress事件中添加绑定事件
//创建xhr对象
var xhr = new XMLHttpRequest()
//监听xhr.upload的onprogress事件
xhr.upload.onprogress = function(e){
// e.lengthComputable是一个布尔值,表示当前上传的资源是否有可计算的长度
if (e.lengthComputable){
// 计算出上传的进度
// e.loaded 已传输的字节
// e.total 需传输的总字节
var procentComplete = Math.ceil((e.loaded / e.total) * 100)
//获取进度条id,将数值动态显示到页面中
$("#percent").attr("style", "width: " + procentComplete + "%").html(procentComplete + "%")
console.log(procentComplete);
}
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../../../css/bootstrap.min.css">
<script src="../../../js/jquery.js"></script>
</head>
<body>
<!-- 1. 文件选择框 -->
<input type="file" id="file1">
<!-- 2. 上传文件的按钮 -->
<button id="btnUpload">上传文件</button>
<!-- bootstrap 中的进度条 -->
<div class="progress" style="width: 500px; margin: 15px 10px;">
<div class="progress-bar progress-bar-striped active" style="width: 0%" id="percent">
</div>
</div>
<br>
<!-- 3. img标签,来显示上传成功以后的图片 -->
<img src="" alt="" id="img" width="800">
<script>
// 1. 获取到文件上传按钮
var btnUpload = document.querySelector("#btnUpload")
// 2. 为按钮绑定单击事件处理函数
btnUpload.addEventListener("click", function () {
// 3. 获取到用户选择的文件列表
var files = document.querySelector("#file1").files
if (files.length <= 0) {
return alert("请选择要上传的文件")
}
var fd = new FormData()
// 将用户选择的文件添加到FormData中
fd.append("avatar", files[0])
var xhr = new XMLHttpRequest()
xhr.upload.onprogress = function (e) {
if (e.lengthComputable) {
// 计算出上传的进度
var procentComplete = Math.ceil((e.loaded / e.total) * 100)
//使用jquery动态显示进度
$("#percent").attr("style", "width: " + procentComplete + "%").html(procentComplete + "%")
}
}
xhr.upload.onload = function () {
$("#percent").removeClass().addClass("progress-bar progress-bar-success")
}
xhr.open("POST", "http://www.liulongbin.top:3006/api/upload/avatar")
xhr.send(fd)
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText)
if (data.status === 200) {
//上传成功
document.querySelector("#img").src = "http://www.liulongbin.top:3006" + data.url
} else {
//上传失败
console.log("图片上传失败!" + data.message);
}
}
}
})
</script>
</body>
</html>