javascript - フォーム送信前にアップロードされた画像の画像の高さと幅を取得するには

Question

jQueryまたはJavascriptを使用して、フォーム送信前にアップロードされた画像の高さと幅を取得する方法は?

<input type="file" />

アップロードする画像の幅と高さが、選択した幅と高さと等しいかどうかを確認する必要があります。このリンクを見つけました。ただし、IE7 と IE8 ではなく、FF と Chrome でのみ機能します。

すべてのブラウザで機能するように寸法を取得する他の方法を誰かに教えてもらえますか?

Answer 1

画像オブジェクトを作成できます。画像オブジェクトを作成した後、アップロードする画像を表示している画像タグから画像を取得し、前述の方法に従って画像の寸法を取得できます。

var v=new Image();
v.src=document.getElementById("up_img").getAttribute('src');
alert(v.width);

画像をimageタグに表示するには、Base64メソッドを使用する必要があることを忘れないでください。つまり、サポートされているかどうかはわかりませんが、Chrome、Firefox、Operaで利用できるHTML5機能です。

Answer 2

セキュリティ上の理由から、IE9、IE8、IE7 はクライアントのコンピューター上のファイルへのアクセスをサポートしていません。そのため、幅や高さが得られません。画像をサーバーにアップロードしてから、画像コントロールに表示し、高さと幅を取得する必要があります。visibility:hidden画像を表示したくない場合に設定できます。

バードビュー

1 つの方法として、アップロード時に進行状況バーを表示し、Ajax を使用してファイルをサーバー上の一時フォルダーに画像名を一時 ID として保存し、その ID をデータベースに保存します (後で削除できるようにするため)。 )、イメージ コントロールに表示します。次に、高さと幅を取得します。