要件分析：
写真をアップロードするとき、アップロードされた画像サイズに限定されない場合、結果は非常に深刻になります。では、どうすれば難しい問題を解決できますか？ 2つの方法があります。
1）バックエンド処理：つまり、Ajax投稿は背景に送信され、画像をサーバーにアップロードし、処理のために画像サイズを取得します。
2）フロントデスクの処理：つまり、JavaScriptを使用して画像サイズを取得します。
明らかに最初の方法は良くありません。ファイルを最初にサーバーにアップロードする必要があるため、ファイルが大きい場合、ネットワークがそれほど速くなく、症状を治療するために長い間待つ必要がありますが、根本原因ではありません。
機能分析：
ここでは、IEとFirefoxブラウザーのさまざまなプラクティスのみを紹介します。
IE6：
キーワード：Filesize onreadyStateChange Complete
IE6では、ファイルサイズはIMGオブジェクトのFilesizeプロパティを介して取得できますが、このFilesizeプロパティの正しい値は、onreadedStateChangeイベントの完全な、つまり、
<img src = "" onreadystatechange = "javascript：sizecheck（this）;"> function sizecheck（img）{if（img.readystate == "complete"）{alert（img.filesize）; }}Firefox 3.0：
キーワード：getasdataurl（）filesize
Firefoxでは、画像をアップロードするためのフルパスを取得することはできません。画像名のみを取得できます。ただし、ブラウザはnsidomfileインターフェイスを提供するため、getasdataurl（）を介して処理されたパスを取得する必要がありますが、このパスは画像SRCの表示に影響しません。
nsidomfileインターフェイス：
domstring getasbinary（）; domstring getasdataurl（）; domstring getastext（domstring encoding）; <入力型= "file" name = "uploadimg" onchange = "javascript：checkfilechange（this）;" size = "12"/> function checkfilechange（obj）{var img = document.getElementById（ "img"）; img.src = obj.files [0] .getasdataurl（）;アラート（obj.files [0] .filesize）; }上記は、2つの異なるブラウザの処理方法です。それで、それらをどのように統合しますか？以下に作成した小さな例を投稿します。ここでは、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; src = "lib/jquery-1.3.2.min.js"> </script> <title>アップロードされた画像サイズをチェック</title> <style type = "text/css"> .img {width：136px; height：102px;} .imgerror {border：border：3px solid;} </lempt = "> <spripe> <fry 100K var maxsize = 100 * 1024; //画像サイズ制限情報var error_imgsize = "画像サイズは100kを超えることはできません"; //デフォルト画像var nophoto = "imgs/nophoto.gif"; //画像の適格なvar isimg = true; /*** inchange event* @params obj file object* @return void **/function checkfilechange（obj）{// intivation 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））{// format 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 = false; }} /*** sizecheck check image size* @params img image object* @return void ** /function sizecheck（img）{//設定$（ "。imgtable"）。 updateTips（ ""）; if（$ .browser.msie）{// IT IS if（img.readystate == "complete"）{if（img.filesize> maxsize）{$（ "。imgtable"）。 updateTips（error_imgsize）; isimg = false; } else {isimg = true; }} else {$（ "。imgtable"）。addclass（ "imgerror"）; updateTips（error_imgsize）; isimg = false; } else {isimg = true; }} else {$（ "。imgtable"）。addclass（ "imgerror"）; updateTips（error_imgsize）; isimg = false; }} else {var file = $（ "input：file [name = 'uploadimg']"）[0]; if（file.files [0] .filesize> maxsize）{$（ "。imgtable"）。addclass（ "imgerror"）; updateTips（error_imgsize）; isimg = false; } else {isimg = true; }}} / *** updateTips登録エラーメッセージ表示* @params strディスプレイコンテンツ* @return void ** / function updateTips（str）{$（ "p＃errortips"）。text（str）; } / *** commit Registerと送信* @return void ** / function commit（）{var iscommit = true; var usrname = $（ "input：text [name = 'usrname']"）、email = $（ "input：text [name = 'email']"）、img = $（ "。img"）、file = $（ "input：file [name = 'uploadimg']"）、frm = document.frm; iscommit = iscommit && isimg; if（iscommit）{frm.criftion = "arbout：blank"; frm.submit（）; }} / *** errorimg画像エラーディスプレイ* @params img image object* @return void ** / function errorimg（img）{img.src = nophoto; } </script> </head> <body> <form name = "frm" method = "post"> <p id = "errortips"> </p> <table cellpadding = "1" cellpacing = "0"> <tr> <td> <ラベル>名前：</label> </td> <td> <入力= "Text" "Usrname"/>> </td = "maxlenty" </tr> <tr> <td> <label>性別：</label> </td> <td> <入力タイプ= "radio" name = "sex" value = "0"/> male <input type = "radio" name = "sex" value = "0"/>女性maxlength = "100"/> </td> </tr> <tr> <td> <lable>画像</label> </td> <td> <td> <table cellpadding = "0" cellpacing = "0"> <tr> <td> <img src = "imgs/nophoto.gif" src = "imgs/nopoto.gif oneerror = "javascript：errorimg（this）;" onreadystatechange = "javascript：sizecheck（this）;"/> </td> </tr> <tr> <td> <input type = "file" name "name" onchange = "javascript：checkfilechange（this）;" size = "12"/> </td> </tr> </table> </td> </tr> <tr> <td colspan = "2"> <a href = "javascript：commive（）;" rel = "external nofollow" rel = "external nofollow" href = "javascript：compid（）;" rel = "外部nofollow" rel = "external nofollow">レジスタ</a> </td> </tr> </table> </form> </body> </html>