如何利用onuploadprogress事件監測文件上傳進度

一、什麼是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/zh-tw/n/190365.html

如何利用onuploadprogress事件監測文件上傳進度

一、什麼是onuploadprogress事件

二、如何使用onuploadprogress事件

三、如何在頁面上顯示上傳進度

四、完整代碼示例

相關推薦

發表回復