> 웹 프론트엔드 > JS 튜토리얼 > JavaScript로 업로드하기 전에 파일 크기와 이미지 크기를 얻는 방법은 무엇입니까?

JavaScript로 업로드하기 전에 파일 크기와 이미지 크기를 얻는 방법은 무엇입니까?

Mary-Kate Olsen
풀어 주다: 2024-11-25 12:39:10
원래의
863명이 탐색했습니다.

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

jQuery 또는 JavaScript를 사용하여 업로드하기 전의 파일 크기 및 이미지 크기

웹사이트에 업로드하기 전에 파일 크기, 이미지 너비, 높이를 얻으려면 File 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);
});
로그인 후 복사
#preview img { max-height: 100px; }
로그인 후 복사
<input>
로그인 후 복사

위 내용은 JavaScript로 업로드하기 전에 파일 크기와 이미지 크기를 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿