JavaScript에서 업로드 유효성 검사를 위해 이미지 크기를 검색하는 방법은 무엇입니까?

Javascript로 업로드할 이미지 크기 확인

Javascript로 이미지 업로드 양식을 구현할 때 업로드된 이미지가 특정 크기 요구 사항을 충족하는지 확인하는 것이 중요합니다. . 이 문서에서는 이미지 크기 확인 중에 직면하는 일반적인 문제, 즉 선택한 이미지의 너비와 높이를 검색하는 방법을 살펴봅니다.

문제

다음 Javascript 함수는 확인하도록 설계되었습니다. 파일 유형 및 크기가 이미지 크기를 검색하지 못함:

<code class="javascript">function checkPhoto(target) {
    if(target.files[0].type.indexOf("image") == -1) {
        // Code to handle file type
    }
    if(target.files[0].size > 102400) {
        // Code to handle image size
    }
    // No code yet for image width and height
}</code>

해결책

이미지 크기를 검색하려면 선택한 파일에서 이미지 개체를 생성해야 합니다. . 이는 URL.createObjectURL() 메소드를 사용하여 달성할 수 있습니다.

<code class="javascript">var _URL = window.URL || window.webkitURL;
$(function() {
    $("#file").change(function (e) {
        var file, img;
        if ((file = this.files[0])) {
            img = new Image();
            var objectUrl = _URL.createObjectURL(file);
            img.onload = function () {
                console.log(this.width + " " + this.height);
                _URL.revokeObjectURL(objectUrl);
            };
            img.src = objectUrl;
        }
    });
});</code>

이 코드 조각은 이미지 객체를 생성하고 img.src를 사용하여 선택한 파일을 로드합니다. 이미지가 로드되면 콜백 함수 img.onload가 실행되어 이미지의 너비와 높이에 액세스할 수 있습니다.

호환성 참고

URL.createObjectURL( ) 메서드는 브라우저 전체에서 보편적으로 지원되지 않습니다. 주로 Firefox와 Chrome에서 지원됩니다. 다른 브라우저의 경우 이미지 크기 확인을 위해 대체 방법이 필요할 수 있습니다.

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