>웹 프론트엔드 >JS 튜토리얼 >Javascript로 업로드하기 전에 이미지 너비와 높이를 확인하는 방법은 무엇입니까?

Javascript로 업로드하기 전에 이미지 너비와 높이를 확인하는 방법은 무엇입니까?

Susan Sarandon
Susan Sarandon원래의
2024-11-01 12:55:021041검색

How to Check Image Width and Height Before Upload with Javascript?

Javascript로 업로드하기 전에 이미지 너비와 높이 확인

사용자가 웹 애플리케이션에 이미지를 업로드하기 전에 크기를 확인하는 것이 중요합니다. 원하는 디스플레이 요구 사항과의 호환성을 보장합니다. 이 Javascript 코드는 파일 제출을 허용하기 전에 이미지 너비와 높이를 확인하는 솔루션을 제공합니다.

<code class="javascript">var _URL = window.URL || window.webkitURL;
$(&quot;#file&quot;).change(function (e) {
    var file, img;
    if ((file = this.files[0])) {
        img = new Image();
        var objectUrl = _URL.createObjectURL(file);
        img.onload = function () {
            if (this.width < 240 || this.height < 240) {
                alert("Image too small (min 240x240)");
            } else {
                // Validation passed
                // Proceed with upload
            }
            _URL.revokeObjectURL(objectUrl);
        };
        img.src = objectUrl;
    }
});</code>

이 코드는 사용자가 선택한 파일에서 이미지 개체를 생성합니다. 이미지 객체의 "onload" 이벤트는 너비와 높이를 얻는 데 사용되며, 그런 다음 원하는 최소 크기와 비교됩니다. 이미지가 기준을 충족하면 유효성 검사가 통과되어 업로드가 진행될 수 있습니다. 그렇지 않으면 사용자에게 이미지가 너무 작다는 것을 알리는 경고가 표시됩니다.

참고: Safari와 같은 일부 브라우저는 URL.createObjectURL() 메서드를 지원하지 않을 수 있다는 점을 고려하는 것이 중요합니다. 브라우저 간 호환성을 위해 필요한 경우 대체 방법을 모색해야 합니다.

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.