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 중국어 웹사이트의 기타 관련 기사를 참조하세요!