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 中国語 Web サイトの他の関連記事を参照してください。