사용자가 부적합한 이미지를 업로드하는 것을 방지하려면 이미지 업로드를 허용하기 전에 유효성 검사 조치를 설정하는 것이 중요합니다. 이 글은 자바스크립트에서 이미지의 너비와 높이를 확인하는 과정을 안내합니다.
기존 자바스크립트 코드:
제공되는 자바스크립트 코드는 파일 형식과 높이를 효과적으로 확인합니다. 업로드된 이미지의 크기입니다. 그러나 치수 유효성 검사는 아직 구현되지 않았습니다.
<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!