HTML5 및 JavaScript를 사용하여 파일을 업로드하기 전에 파일 크기, 이미지 너비 및 높이를 어떻게 알 수 있습니까?

업로드 전 파일 크기, 이미지 너비, 높이 확인

업로드 전에 파일 크기와 이미지 크기를 확인하는 것은 제출물을 확인하고 관리하는 데 필수적입니다. HTML5와 JavaScript를 사용하여 이를 달성하는 방법은 다음과 같습니다.

HTML5 파일 API 사용

파일 API는 사용자가 선택한 파일에 대한 정보에 액세스할 수 있는 메커니즘을 제공합니다. 이를 활용하여 파일 크기, 이미지 높이 및 너비를 검색할 수 있습니다. 다음 예를 고려하십시오.

const browseInput = document.getElementById('browse');
const previewContainer = document.getElementById('preview');

const handleFileSelection = (event) => {
  previewContainer.innerHTML = '';
  const files = event.target.files;

  if (!files || files.length === 0) {
    alert('No files selected!');
    return;
  }

  for (const file of files) {
    // Check if the file is an image
    if (!file.type.startsWith('image/')) {
      previewContainer.insertAdjacentHTML('beforeend', `Unsupported format: ${file.name}<br>`);
      continue;
    }

    // Create an image element to calculate width and height
    const img = new Image();
    img.onload = () => {
      previewContainer.appendChild(img);
      const fileInfo = `
        <div>
          ${file.name}
          ${img.width} × ${img.height}
          ${file.type}
          ${Math.round(file.size / 1024)} KB
        </div>
      `;
      previewContainer.insertAdjacentHTML('beforeend', fileInfo);
    };

    // Load the image and release the URL when done
    img.src = URL.createObjectURL(file);
  }
};

browseInput.addEventListener('change', handleFileSelection);

추가 가능성

이 접근 방식을 사용하면 업로드하기 전에 파일 크기, 이미지 너비 및 높이를 얻을 수 있으므로 허용되는 파일 형식 및 크기를 더 효과적으로 제어할 수 있습니다. 또한 제출하기 전에 선택한 이미지의 미리보기를 제공하는 등 검증 및 표시 목적으로 이 정보를 사용할 수 있습니다.

위 내용은 HTML5 및 JavaScript를 사용하여 파일을 업로드하기 전에 파일 크기, 이미지 너비 및 높이를 어떻게 알 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!