HTML5 と JavaScript を使用してアップロードする前にファイル サイズや画像のサイズをプレビューするにはどうすればよいですか?

HTML5 と JavaScript を使用してアップロードする前にファイルのメタデータをプレビューする

問題:

ファイル サイズ、画像を取得するにはどうすればよいですか? jQuery またはJavaScript?

解決策:

HTML5 の File API を利用すると、ファイルのアップロード前に次の情報にアクセスできます:

ファイル サイズ:

• file.size プロパティを通じて、ファイル サイズをバイト単位で返します。

画像の幅と高さ:

• 画像の場合、URL API を使用して一時 URL を作成できます。画像 BLOB を取得し、それを一時的な画像要素に読み込みます。
• 画像が読み込まれると、前にその幅と高さのプロパティにアクセスできます。オブジェクト URL を取り消してメモリを解放します。

URL API を使用した例:

以下のコード スニペットは、URL API を使用して画像メタデータをプレビューする方法を示しています。

const readImage = file => {
  if (!(/^image\/(png|jpe?g|gif)$/).test(file.type))
    return EL_preview.insertAdjacentHTML('beforeend', `Unsupported format ${file.type}: ${file.name}<br>`);

  const img = new Image();
  img.addEventListener('load', () => {
    EL_preview.appendChild(img);
    EL_preview.insertAdjacentHTML('beforeend', `<div>${file.name} ${img.width}×${img.height} ${file.type} ${Math.round(file.size / 1024)}KB<div>`);
    window.URL.revokeObjectURL(img.src); // Free some memory
  });
  img.src = window.URL.createObjectURL(file);
};

EL_browse.addEventListener('change', ev => {
  EL_preview.innerHTML = ''; // Remove old images and data
  const files = ev.target.files;
  if (!files || !files[0]) return alert('File upload not supported');
  [...files].forEach(readImage);
});

以上がHTML5 と JavaScript を使用してアップロードする前にファイル サイズや画像のサイズをプレビューするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。