//创建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);
}
控制台打印结果
完整代码
<body>
<!-- 1. 文件选择框 -->
<input type="file" id="file1">
<!-- 2. 上传文件的按钮 -->
<button id="btnUpload">上传文件</button>
<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)
console.log(procentComplete);
}
}
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>