使用场景如下：
用户在下载完成后需要删除或者标记用户已下载，只有下载完成才更改
用户未下载完成的都不算
最佳解决方案
收藏<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function download() {
var request = new XMLHttpRequest();
var file = document.getElementById("file").value;
request.open('get', file, true);
request.send();
request.onreadystatechange = function () {
if (request.readyState == 4) {//readyState=3时不兼容火狐和谷歌
var header = request.getAllResponseHeaders(); //获得所有的响应头信息 响应头里有Content-Length 文件总长度
var length = request.getResponseHeader('content-length'); //文件总长度
document.getElementById("header").value = header;//innerText不兼容火狐浏览器
console.log(length);
}
}
request.addEventListener('progress', function (event) {
if (event.lengthComputable) {
let percentComplete = event.loaded / event.total;
//已下载 除以 总长度就是当前下载进度 为1时表示下载完成
if (percentComplete == 1) {
finish();
}
}
}, false);
}
function finish() {
alert("现在完成，你可以做其他的事情了！");
}
</script>
</head>
<body>
<div>
文件路径:<input type="text" id="file" style="width:300px" /> <input type="button" onclick="download()" value="开始下载" /><br />
<textarea id="header" cols="60" rows="20"></textarea>
</div>
</body>
</html>
打赏
0
1
1
