如何使用 HTML5 和 JavaScript 在上傳之前預覽檔案大小、圖片尺寸？

使用HTML5 和JavaScript 上傳之前預覽檔案元資料

問題：

如何取得檔案大小、圖片使用jQuery大小、圖片使用jQuery或將文件上傳到您的網站之前的寬度和高度JavaScript？

解決方案：

利用HTML5 的檔案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中文網其他相關文章！