如何使用 JavaScript 在上傳之前驗證檔案大小？

如何使用JavaScript 在上傳之前驗證檔案大小

在Web 開發中，通常需要在將使用者提交的檔案上傳到一台伺服器.一項重要的驗證檢查是確保檔案大小不超過指定的限制。 JavaScript 提供了一個檔案 API，可讓您檢查檔案屬性，包括大小。

要使用 JavaScript 驗證檔案大小，您可以使用以下步驟：

1. 檢查瀏覽器支援：驗證瀏覽器是否支援檔案API。
2. 取得檔案物件：使用 擷取檔案物件
3. 讀取檔案大小：使用File.size 屬性取得檔案大小（以位元組為單位）。
4. 比較大小：檢查如果檔案大小超過指定閾值。如果是，則顯示錯誤訊息或阻止檔案上傳。
5. 顯示結果：用適當的訊​​息通知用戶，指示驗證成功或錯誤。

以下是示範檔案大小驗證的JavaScript 程式碼範例：

// Get the input element
const input = document.getElementById('fileinput');

// Add event listener for selecting a file
input.addEventListener('change', function() {
  // Verify browser support
  if (!window.FileReader) {
    console.log("File API not supported");
    return;
  }

  // Get the first selected file
  const file = input.files[0];

  // Validate file size
  const maxSize = 5 * 1024 * 1024; // 5MB
  if (file.size > maxSize) {
    alert("File exceeds the maximum size of 5MB");
  } else {
    alert("File size is valid");
  }
});

透過實作此驗證，您可以防止使用者上傳過多的文件，確保伺服器資源不被過度使用。

以上是如何使用 JavaScript 在上傳之前驗證檔案大小？的詳細內容。更多資訊請關注PHP中文網其他相關文章！