요구 사항 분석 :
사진을 업로드 할 때 업로드 된 사진 크기가 제한되지 않으면 결과가 매우 심각합니다. 그렇다면 어떻게 어려운 문제를 해결할 수 있습니까? 두 가지 방법이 있습니다.
1) 백엔드 처리 : 즉, Ajax Post는 배경에 제출되어 이미지를 서버에 업로드 한 다음 처리를 위해 이미지 크기를 얻습니다.
2) 프론트 데스크 처리 : 즉, 자바 스크립트를 사용하여 이미지 크기를 얻습니다.
분명히 첫 번째 방법은 좋지 않습니다. 파일을 먼저 서버에 업로드해야하므로 파일이 크면 네트워크가 빠르지 않으며 증상을 치료하기 위해 오랫동안 기다려야하지만 근본 원인은 아닙니다.
기능 분석 :
여기서는 IE 및 Firefox 브라우저의 다양한 관행 만 소개합니다.
IE6 :
키워드 : filesize oneadryStateChange 완료
IE6에서 파일 크기는 IMG 객체의 파일 크기 속성을 통해 얻을 수 있지만,이 파일 크기의 올바른 값은 onreadyStateChange 이벤트의 전체에 내장되어 있습니다.
<img src = ""OnreadyStateChange = "JavaScript : SizeCheck (this);"> 함수 SizeCheck (IMG) {if (img.readystate == "complete") {alert (img.filesize); }}Firefox 3.0 :
키워드 : getasdataurl () 파일 크기
Firefox에서는 이미지를 업로드 할 수있는 전체 경로를 얻을 수 없습니다. 이미지 이름 만 얻을 수 있습니다. 그러나 브라우저는 nsidomfile 인터페이스를 제공하므로 getasdataurl ()을 통해 처리 된 경로를 얻어야하지만이 경로는 이미지 SRC의 표시에 영향을 미치지 않습니다.
nsidomfile 인터페이스 :
domstring getAsbinary (); domstring getasdataurl (); domstring getastext (domstring alcoding); <input type = "file"name = "uploadimg"onchange = "javaScript : CheckFileChange (this);"; size = "12"/> 함수 CheckFileChange (OBJ) {var img = document.getElementById ( "IMG"); img.src = obj.files [0] .getasdataurl (); 경고 (obj.files [0] .filesize); }위는 두 개의 다른 브라우저의 처리 방법이므로 어떻게 통합합니까? jQuery를 사용하여 객체 획득을 용이하게하는 작은 예제를 게시하겠습니다.
<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"xml : lang = "zh"lang = "zh"dir = "ltr"> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> <text/javascrip " src = "lib/jquery-1.3.2.min.js"> </script> <title> 업로드 된 이미지 크기를 확인합니다 </title> <style type = "text/css"> .img {너비 : 136px; 높이 : 102px;} .Imgerror {3px solid red; 100k var maxsize = 100 * 1024; // 이미지 크기 제한 정보 var error_imgsize = "이미지 크기는 100k를 초과 할 수 없습니다"; // 기본 이미지 var nophoto = "imgs/nophoto.gif"; // 이미지는 자격을 갖춘 var isimg = true입니다. /*** 입력 파일 onchange event* @params obj 파일 개체* @return void **/function checkfilechange (obj) {// setting $ ( ". imgtable"). removeClass ( "imgerror"); updateTips ( ""); var img = $ ( ". img"). get (0); var file = obj.value; var exp = /./.jpg| ./.gif| ./.png| ./.bmp/i; if (exp.test (file)) {// 형식을 확인 if ($. browser.msie) {// img.src = file인지 판단; } else {img.src = obj.files [0] .getasdataurl (); SizeCheck (IMG); }} else {img.src = nophoto; $ ( ". imgtable"). addClass ( "imgerror"); updateTips ( "IMG 형식이 잘못되었습니다"); isimg = 거짓; }} /*** SIZECHECK 이미지 크기* @Params IMG 이미지 객체* @return void ** /function sizecheck (img) {// 설정 $ ( ". imgtable"). RemoveClass ( "imgerror"); updateTips ( ""); if ($ .Browser.msie) {// if If (img.readystate = "complete") {if (img.filesize> maxsize) {$ ( ". imgtable"). addClass ( "imgerror"); updateTips (error_imgsize); isimg = 거짓; } else {isimg = true; }} else {$ ( ". imgtable"). addClass ( "imgerror"); updateTips (error_imgsize); isimg = 거짓; } else {isimg = true; }} else {$ ( ". imgtable"). addClass ( "imgerror"); updateTips (error_imgsize); isimg = 거짓; }} else {var file = $ ( "input : file [name = 'uploadimg']") [0]; if (file.files [0] .filesize> maxsize) {$ ( ". imgtable"). addClass ( "imgerror"); updateTips (error_imgsize); isimg = 거짓; } else {isimg = true; }}} / *** updatEtips 등록 오류 메시지 표시* @params str 디스플레이 컨텐츠* @return void ** / function updateTips (str) {$ ( "p#errortips"). text (str); } / *** 커밋 등록 및 제출* @return void ** / function commit () {var iscommit = true; var usrname = $ ( "입력 : 텍스트 [이름 = 'usrname']"), email = $ (입력 : 텍스트 [name = 'email'] "), img = $ (". img "), file = $ ("input : 'uploadimg']), frm = document.frm; iscommit = iscommit && isimg; if (iscommit) {frm.Action = "about : blank"; frm.submit (); }} / *** ERRORIMG 이미지 오류 디스플레이* @Params img image 객체* @return void ** / function errorimg (img) {img.src = nophoto; }. </tr> <td> <td> <label> 성별 : </label> </td> <td> <입력 유형 = "radio"name = "sex"value = "0"/> male <input type = "radio"name = "sex"value = "0"/> 여자 </td> </td> <td> <td> email> </td> <input> <input> 이름 = "email"maxlength = "100"/> </td> </tr> <td> <td> <lable> 이미지 </label> </td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <셀 패싱 = "0"> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> img src = "imgs/nophoto.gif"src = "src =" ONEERROR = "JavaScript : ErrorImg (this);" OnreadyStateChange = "JavaScript : SizeCheck (this);"/> </td> </tr> <td> <td> <입력 유형 = "파일"이름 = "uploadImg"onchange = "javaScript : CheckFileChange (this);"; size = "12"/> </td> </tr> </table> </td> </tr> <tr> <td colspan = "2"> <a href = "javaScript : commit ();"; rel = "외부 nofollow"rel = "외부 nofollow"href = "javaScript : commit ();"; rel = "외부 nofollow"rel = "외부 nofollow"> register </a> </td> </tr> </table> </body> </body> </html>