一、什么是onuploadprogress事件
onuploadprogress事件是XMLHttpRequest2中新增的事件，用于在文件上传过程中监测文件上传的进度。
在XMLHttpRequest2之前，我们只能使用onreadystatechange事件来监测文件上传的状态，但是这种方式不能直接获取文件上传的进度信息。
通过使用onuploadprogress事件，我们可以获得以下信息：
loaded: 已上传的字节数 total: 文件总字节数
这些信息可以用来计算文件上传的进度。
二、如何使用onuploadprogress事件
首先，我们需要创建XMLHttpRequest对象：
var xhr = new XMLHttpRequest();
然后，我们需要为xhr对象添加onuploadprogress事件监听器：
xhr.upload.addEventListener("progress", uploadProgress, false);
upload属性表示上传过程中的事件，addEventListner函数用于添加事件监听器。第一个参数为事件名称，第二个参数为事件处理函数，第三个参数为是否在捕获阶段处理事件。
我们需要在事件处理函数中获取已上传的字节数和文件总字节数，并计算上传进度：
function uploadProgress(event) {
if (event.lengthComputable) {
var percentComplete = event.loaded / event.total;
// 计算上传进度，并将结果显示出来
console.log(percentComplete);
} else {
// 无法计算上传进度
}
}
在事件处理函数中，我们首先检查event对象的lengthComputable属性是否为true，如果为true，说明文件总字节数是可计算的，我们就可以计算上传进度。
当事件处理完毕后，我们就可以发送文件上传请求：
xhr.open("POST", "upload.php", true);
xhr.send(formData);
其中，”POST”表示请求的方法，”upload.php”表示文件上传的地址，true表示使用异步模式发送请求，formData表示要上传的文件。如果需要上传多个文件，可以使用FormData对象添加多个文件：
var formData = new FormData();
formData.append("file1", file1);
formData.append("file2", file2);
三、如何在页面上显示上传进度
我们可以使用HTML5的progress元素来显示文件上传的进度：
<progress id="uploader" value="0"></progress>
我们还需要使用JavaScript更新progress元素的value属性，来显示上传进度：
function uploadProgress(event) {
if (event.lengthComputable) {
var percentComplete = Math.round(event.loaded / event.total * 100);
document.getElementById("uploader").value = percentComplete;
}
}
在这里，我们将计算出的上传进度乘以100，并使用Math.round函数将结果四舍五入，然后将结果更新到progress元素的value属性中。
四、完整代码示例
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文件上传进度监测</title>
</head>
<body>
<form enctype="multipart/form-data" method="post">
<input type="file" name="file1">
<input type="file" name="file2">
<input type="submit" value="上传">
</form>
<progress id="uploader" value="0"></progress>
<script src="upload.js"></script>
</body>
</html>
JavaScript：
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.open("POST", "upload.php", true);
var formData = new FormData();
formData.append("file1", document.getElementsByName("file1")[0].files[0]);
formData.append("file2", document.getElementsByName("file2")[0].files[0]);
xhr.send(formData);
function uploadProgress(event) {
if (event.lengthComputable) {
var percentComplete = Math.round(event.loaded / event.total * 100);
document.getElementById("uploader").value = percentComplete;
}
}
PHP：
foreach ($_FILES as $file) {
move_uploaded_file($file["tmp_name"], "/path/to/uploads/" . $file["name"]);
}
在这个PHP脚本中，我们首先使用foreach循环遍历所有上传的文件。然后，我们使用move_uploaded_file函数将上传的文件移动到指定目录下。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/190365.html
微信扫一扫 
支付宝扫一扫 