자바스크립트 업로드된 이미지 크기 확인 [클라이언트]_jquery
- WBOY원래의
- 2016-05-16 18:48:451188검색
요구사항 분석:
이미지 업로드 시, 업로드되는 이미지의 크기를 제한하지 않으면 결과가 매우 심각해집니다. 그렇다면 어려운 문제를 어떻게 해결할 수 있을까요? 두 가지 방법이 있습니다:
1) 백그라운드 처리: 즉, AJAX POST를 백그라운드에 제출하고 이미지를 서버에 업로드한 다음 이미지 크기를 얻어서 처리합니다.
2) 프런트 엔드 처리: 즉, Javascript를 사용하여 이미지 크기를 가져옵니다.
분명히 첫 번째 방법은 매우 나쁩니다. 파일을 서버에 먼저 업로드해야 하기 때문에 파일이 큰 경우 인터넷 속도가 그리 빠르지 않고, 오랜 시간 기다려야 하기 때문에 증상은 치료되지만 근본 원인은 해결되지 않습니다.
기능 분석:
여기에서는 IE와 FireFox의 다양한 접근 방식만 소개하겠습니다.
IE6:
키워드: fileSize onreadystatechange 완료
IE6에서는 Img 객체의 fileSize 속성을 통해 파일 크기를 얻을 수 있지만 이 fileSize 속성의 올바른 값은 onreadystatechange 완료 시 설정됩니다. 이벤트, 즉
![]()
onreadystatechange="Javascript:sizeCheck(this);">
function sizeCheck(img) {
if(img.readyState == "완료") {
alert(img.fileSize ; 경로, 이미지 이름만 얻을 수 있습니다. 하지만 브라우저에서는 nsIDOMFile과 같은 인터페이스를 제공하므로 getAsDataURL()을 통해 처리된 경로를 얻어야 하지만 이 경로는 이미지 src 표시에 영향을 주지 않습니다.
nsIDOMFile 인터페이스:
DOMString getAsBinary();
DOMString getAsDataURL();DOMString getAsText(DOMString 인코딩);
코드 복사
코드는 다음과 같습니다.
코드는 다음과 같습니다.
;
업로드된 이미지 크기 확인
<본문>
이미지 업로드 시, 업로드되는 이미지의 크기를 제한하지 않으면 결과가 매우 심각해집니다. 그렇다면 어려운 문제를 어떻게 해결할 수 있을까요? 두 가지 방법이 있습니다:
1) 백그라운드 처리: 즉, AJAX POST를 백그라운드에 제출하고 이미지를 서버에 업로드한 다음 이미지 크기를 얻어서 처리합니다.
2) 프런트 엔드 처리: 즉, Javascript를 사용하여 이미지 크기를 가져옵니다.
분명히 첫 번째 방법은 매우 나쁩니다. 파일을 서버에 먼저 업로드해야 하기 때문에 파일이 큰 경우 인터넷 속도가 그리 빠르지 않고, 오랜 시간 기다려야 하기 때문에 증상은 치료되지만 근본 원인은 해결되지 않습니다.
기능 분석:
여기에서는 IE와 FireFox의 다양한 접근 방식만 소개하겠습니다.
IE6:
키워드: fileSize onreadystatechange 완료
IE6에서는 Img 객체의 fileSize 속성을 통해 파일 크기를 얻을 수 있지만 이 fileSize 속성의 올바른 값은 onreadystatechange 완료 시 설정됩니다. 이벤트, 즉
코드 복사 코드는 다음과 같습니다.
function sizeCheck(img) {
if(img.readyState == "완료") {
alert(img.fileSize ; 경로, 이미지 이름만 얻을 수 있습니다. 하지만 브라우저에서는 nsIDOMFile과 같은 인터페이스를 제공하므로 getAsDataURL()을 통해 처리된 경로를 얻어야 하지만 이 경로는 이미지 src 표시에 영향을 주지 않습니다.
nsIDOMFile 인터페이스:
DOMString getAsBinary();
DOMString getAsDataURL();
코드 복사
코드는 다음과 같습니다.
onchange="Javascript:checkFileChange(this); " size="12"/> function checkFileChange(obj) { var img = document.getElementById("img");
img.src = obj.files[0]. getAsDataUrl() ; alert(obj.files[0].fileSize);
}
위는 서로 다른 두 브라우저의 처리 방법인데 어떻게 통합하나요? 아래에 JQuery를 사용하여 객체 획득을 용이하게 하는 작은 예제를 게시하겠습니다.
코드 복사
}
위는 서로 다른 두 브라우저의 처리 방법인데 어떻게 통합하나요? 아래에 JQuery를 사용하여 객체 획득을 용이하게 하는 작은 예제를 게시하겠습니다.
코드 복사
코드는 다음과 같습니다.
;
<본문>