JavaScript でアップロードされた画像サイズを確認する [client]_jquery

要件分析:
画像をアップロードするときに、アップロードする画像のサイズを制限しないと、非常に深刻な結果が生じます。では、どうすれば難しい問題を解決できるでしょうか?方法は 2 つあります。
1) バックグラウンド処理 : つまり、AJAX POST がバックグラウンドに送信され、画像がサーバーにアップロードされ、処理用に画像サイズが取得されます。
2) フロントエンド処理 : つまり、JavaScript を使用して画像サイズを取得します。
明らかに最初の方法は非常に悪いです。ファイルを最初にサーバーにアップロードする必要があるため、ファイルが大きい場合、インターネットはそれほど高速ではなく、長時間待つ必要があり、症状は治まりますが、根本的な原因は解決されません。
機能分析:
ここでは、IE と FireFox の異なるアプローチのみを紹介します。
IE6:
キーワード: fileSize onreadystatechange complete
IE6 では、ファイル サイズは Img オブジェクトの fileSize 属性を通じて取得できますが、この fileSize 属性の正しい値は onreadystatechange の complete で確立されます。イベント、つまり、

コードをコピー コードは次のとおりです:

onreadystatechange="Javascript:sizeCheck(this);">
function sizeCheck(img) {

if(img.readyState == "complete") {
alert(img.fileSize ; パス、イメージ名のみを取得できます。ただし、ブラウザには nsIDOMFile などのインターフェイスが用意されているため、getAsDataURL() で処理後のパスを取得する必要がありますが、このパスは画像 src の表示には影響しません。
nsIDOMFile インターフェイス:
DOMString getAsBinary();
DOMString getAsText(DOMString エンコーディングの場合);

コードをコピーします。


コードは次のとおりです。

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);

}

上記は 2 つの異なるブラウザの処理方法ですが、これらを統合するにはどうすればよいでしょうか?以下に、JQuery を使用してオブジェクトの取得を容易にする、私が作成した小さな例を投稿します。




コードをコピー

コードは次のとおりです:

;







<フォーム名="frm" メソッド="投稿">

 

<表 cellpadding="1" cellpacing="0" width="350px" border="1">

姓名：



特性:
男女


邮件：



画像

onreadystatechange="Javascript:sizeCheck(this);"/>

size="12"/>

注册