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 중국어 웹사이트의 기타 관련 기사를 참조하세요!