>  기사  >  웹 프론트엔드  >  JavaScript로 업로드하기 전에 이미지 크기를 확인하는 방법은 무엇입니까?

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

Susan Sarandon
Susan Sarandon원래의
2024-11-01 12:08:02548검색

How to Verify Image Dimensions Before Uploading with JavaScript?

JavaScript로 업로드하기 전에 이미지 크기 확인

사용자가 부적합한 이미지를 업로드하는 것을 방지하려면 이미지 업로드를 허용하기 전에 유효성 검사 조치를 설정하는 것이 중요합니다. 이 글은 자바스크립트에서 이미지의 너비와 높이를 확인하는 과정을 안내합니다.

기존 자바스크립트 코드:

제공되는 자바스크립트 코드는 파일 형식과 높이를 효과적으로 확인합니다. 업로드된 이미지의 크기입니다. 그러나 치수 유효성 검사는 아직 구현되지 않았습니다.

<code class="javascript">function checkPhoto(target) {
    if(target.files[0].type.indexOf("image") == -1) {
        document.getElementById("photoLabel").innerHTML = "File not supported";
        return false;
    }
    if(target.files[0].size > 102400) {
        document.getElementById("photoLabel").innerHTML = "Image too big (max 100kb)";
        return false;
    }
    document.getElementById("photoLabel").innerHTML = "";
    return true;
}</code>

이미지 치수 유효성 검사 구현:

이미지 치수를 확인하려면 다음에서 이미지 객체를 수동으로 생성해야 합니다. 업로드된 파일. 다음 JavaScript 코드가 이를 수행합니다.

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

데모 및 호환성:

JSFiddle: http://jsfiddle에서 이 코드의 작업 예제를 볼 수 있습니다. net/4N6D9/1/.

이 방법은 특정 브라우저(주로 Firefox 및 Chrome)에서만 지원된다는 점에 유의하는 것이 중요합니다.

추가 참고:

URL.createObjectURL() 메서드를 사용하기 전에 HTMLMediaElement.srcObject에 스트림을 할당하기 위해 더 이상 사용되지 않는다는 점에 유의하세요. 자세한 내용은 공식 문서를 참고하세요.

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

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