如何使用 JavaScript 在上傳之前獲取檔案大小和圖像尺寸？-js教程-PHP中文網

如何使用 JavaScript 在上傳之前獲取檔案大小和圖像尺寸？

Mary-Kate Olsen

發布： 2024-11-25 12:39:10

原創

864 人瀏覽過

How to Get File Size and Image Dimensions Before Upload with JavaScript?

使用jQuery 或JavaScript 上傳之前的檔案大小和圖片尺寸

要在上傳到網站之前獲取檔案大小、圖片寬度和高度，請使用檔案API由HTML5 和JavaScript 提供。

利用 URL API

Blob 物件將表示為圖片來源的 URL。

<img src="blob:null/026cceb9-edr4-4281-babb-b56cbf759a3d">

登入後複製

const EL_browse = document.getElementById('browse');
const EL_preview = document.getElementById('preview');

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);
});

登入後複製