版权声明：任先阳 任 先 阳 任先 先阳，nvcc.cc、www.nvcc.cc、sbfox.com、www.sbfox.com https://blog.csdn.net/qq_39571197/article/details/85275297
陈年老问题了，记录一下，XMLHttpRequest.upload
主要就是 xhr.onprogress 与 xhr.upload.onprogress
<!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>
</head>
<body>
<input type="file" id="btn">
<script>
btn.onchange = function (e) {
const formData = new FormData();
formData.append('file', e.target.files[0]);
const xhr = new XMLHttpRequest();
xhr.onprogress = function (e) {
console.log('xhr.onprogress', '我只在上传结束触发');
console.log(e.loaded);
console.log(e.total);
};
xhr.upload.onprogress = function (e) {
console.log('xhr.onprogress', '我在上传时多次触发');
console.log(e.loaded / e.total);
};
xhr.open('post', 'demo.php');
xhr.send(formData)
}
</script>
</body>
</html>
// demo.php
<?php
$file = $_FILES['file'];
echo json_encode($file);