JavaScript로 업로드하기 전에 이미지 크기를 확인하는 방법은 무엇입니까?

JavaScript를 사용하여 업로드하기 전에 이미지 크기 유효성 검사

사용자가 이미지 크기 지침을 준수하도록 하려면 업로드하기 전에 이미지 너비와 높이를 확인하는 것이 중요합니다. .

파일 유효성 검사

기존 코드는 파일 형식과 크기의 유효성을 검사합니다. 이미지 크기 검사를 추가하려면 업로드된 파일에서 이미지 개체를 생성해야 합니다.

createObjectURL()

최신 브라우저의 createObjectURL() 메서드를 사용하면 다음을 수행할 수 있습니다. 파일에서 임시 URL 객체를 생성합니다. 그런 다음 Image 개체를 사용하여 이미지를 비동기적으로 로드할 수 있습니다.

<code class="javascript">const file = target.files[0];
const objectUrl = URL.createObjectURL(file);

const img = new Image();
img.onload = () => {
  console.log(`Width: ${img.width}, Height: ${img.height}`);
  URL.revokeObjectURL(objectUrl);
};

img.src = objectUrl;</code>

Considerations

• createObjectURL()은 Firefox, Chrome과 같은 최신 브라우저에서만 지원됩니다. 및 Opera.
• 완료 후 임시 URL을 해제하려면 URL.revokeObjectURL() 메서드를 호출해야 합니다.

데모

여기에서 실제 예를 확인하세요: https://jsfiddle.net/4N6D9/1/

참고: 앞서 언급했듯이 이 접근 방식은 브라우저에 따라 다르며 모든 플랫폼에서 일관되게 작동하지 않을 수 있습니다. .

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