使用 HTML5 和 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中文网其他相关文章！