>

변경 이벤트를 사용하여 양식에서 이미지의 치수를 확인하려고합니다. 확장 및 크기를 성공적으로 확인할 수는 있지만 치수 유효성 검사는 중단되었습니다

<input type="file" name="files[]" onchange="validatePassport()" id="passportpic" required/>

자바 스크립트

function validatePassport() {
            var formData = new FormData();
            var file = document.getElementById("passportpic").files[0];
            formData.append("Filedata", file);
            var t = file.type.split('/').pop().toLowerCase();
            if (t != "jpeg" && t != "jpg" && t != "png") {
                alert('Please select a valid image file');
                document.getElementById("passportpic").value = '';
                return false;
            }
              if(file.height > 200  || file.width  > 200) {
                alert("Height and Width must not exceed 200px.");
                document.getElementById("passportpic").value = '';
                return false;
              }
            if (file.size > 209715) {
                alert("Max Upload size is 200kb only");
                document.getElementById("passportpic").value = '';
                return false;
            }
            return true;
        }

  • 답변 # 1

    파일 객체의 이미지 너비/높이는 얻을 수 없지만 이미지 객체에서만 얻을 수 있습니다.

    그런 식으로 시도해 볼 수 있습니다 :

    function validatePassport() {
        var formData = new FormData();
        var file = document.getElementById("passportpic").files[0];
        formData.append("Filedata", file);
        var t = file.type.split('/').pop().toLowerCase();
        if (t != "jpeg" && t != "jpg" && t != "png") {
            alert('Please select a valid image file');
            document.getElementById("passportpic").value = '';
            return false;
        }
        if (file.size > 209715) {
            alert("Max Upload size is 200kb only");
            document.getElementById("passportpic").value = '';
            return false;
        }
        // Now you have to check dimension
        var image = new Image();
        image.onload = function () {
            var imageWidth = this.width;
            var imageHeight = this.height;
            if(imageHeight > 200  || imageWidth > 200) { 
                alert("Height and Width must not exceed 200px.");
                document.getElementById("passportpic").value = '';
            }
        }
        var URLObject = window.URL || window.webkitURL;
        image.src = URLObject.createObjectURL(file);
        return true;
    }
    
    

  • 이전 excel - 특정 기준/결과를 충족하는지에 따라 ID 수를 어떻게 얻습니까?
  • 다음 apache spark - 배열 유형 열이있는 스칼라 데이터 프레임을 datset으로 변환