首頁 > web前端 > js教程 > 使用 HTML5 和 JavaScript 上傳檔案之前如何取得檔案大小、圖像寬度和高度?

使用 HTML5 和 JavaScript 上傳檔案之前如何取得檔案大小、圖像寬度和高度?

Linda Hamilton
發布: 2024-11-25 10:40:11
原創
900 人瀏覽過

How Can I Get File Size, Image Width, and Height Before Uploading a File Using HTML5 and JavaScript?

上傳前獲取檔案大小、圖像寬度和高度

上傳前獲取檔案大小和圖像尺寸對於驗證和管理提交至關重要。以下是如何使用 HTML5 和 JavaScript 實現此目的:

使用 HTML5 檔案 API

檔案 API 提供了一種機制來存取有關使用者所選檔案的資訊。這可以用來檢索檔案大小、圖像高度和寬度。考慮以下範例:

const browseInput = document.getElementById('browse');
const previewContainer = document.getElementById('preview');

const handleFileSelection = (event) => {
  previewContainer.innerHTML = '';
  const files = event.target.files;

  if (!files || files.length === 0) {
    alert('No files selected!');
    return;
  }

  for (const file of files) {
    // Check if the file is an image
    if (!file.type.startsWith('image/')) {
      previewContainer.insertAdjacentHTML('beforeend', `Unsupported format: ${file.name}<br>`);
      continue;
    }

    // Create an image element to calculate width and height
    const img = new Image();
    img.onload = () => {
      previewContainer.appendChild(img);
      const fileInfo = `
        <div>
          ${file.name}
          ${img.width} × ${img.height}
          ${file.type}
          ${Math.round(file.size / 1024)} KB
        </div>
      `;
      previewContainer.insertAdjacentHTML('beforeend', fileInfo);
    };

    // Load the image and release the URL when done
    img.src = URL.createObjectURL(file);
  }
};

browseInput.addEventListener('change', handleFileSelection);
登入後複製

更多可能性

此方法可讓您在上傳之前取得檔案大小、影像寬度和高度,從而更好地控制可接受的檔案類型和尺寸。此外,您可以將此資訊用於驗證和顯示目的,例如在提交之前提供所選圖像的預覽。

以上是使用 HTML5 和 JavaScript 上傳檔案之前如何取得檔案大小、圖像寬度和高度?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板