在 HTML5 中上傳之前如何取得檔案大小、圖像尺寸和類型？

上傳前取得檔案大小、圖片寬度和高度

隨著HTML5 和File API 的出現，取得檔案大小，上傳前的影像寬度和高度變得更加簡單。

使用URL API

此方法利用URL API 建立上傳檔案的URL 表示形式：

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 中上傳之前如何取得檔案大小、圖像尺寸和類型？的詳細內容。更多資訊請關注PHP中文網其他相關文章！