画像ファイルをアップロードする前に縦横のサイズを取得

締切済

質問者：jamaica88
質問日時：2009/05/16 14:53
回答数：2件

ローカルに保存されている任意の画像を選択（input type=fileなどで）
すると、テキストボックスにその画像の縦横サイズを表示するといった
事をやりたいのですが、Javascriptで実現可能でしょうか？

img.src = "ファイルパス";
img.height;
img.width;

でサイズ取得は可能ですが、ファイルパスを直書きするのではなく、
あくまで、任意の画像を選択して取得したいです。

わかる方がいらっしゃいましたらご教授いただきたいと思います。
よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： MoguraSE
回答日時：2009/05/17 15:33

No.1の者です。

動作環境を書いておりませんでしたね…　失礼しました。
このスクリプトはInternet Explorer 7 or 8で動作します。
すべてのブラウザを試したわけではありませんが、ブラウザによってはファイル選択部品の動作がまちまちなので、動作しないかもしれません。
Firefox 3の場合は、ファイル選択フォームの戻り値がファイル名のみのため、うまく動きません。
テキスト入力フォームにして、ファイルパスを手入力すれば動作しますが…あんまり使い勝手がいいとはいえません。
下記はその例です。
<html>
<head>
<script language="JavaScript">
var img = new Image();
var d = 0;

function chkimg()
{
m = document.form.fname.value;
ms = "file:///" + m.replace(/\\/, "/");
img.src = ms;
setTimeout('show()',100);
d = 0;
}

function show()
{
if(img.width == 0){
d = d + 1;
if(d > 30){
alert(img.src + " :取得できませんでした…");
}else{
setTimeout('show()',100);
}
}else{
alert(img.src + "=" + img.width + "," + img.height);
}
}
</script>
</head>
<body>
<form name=form>
<input type=text name=fname><input type=button value="表示" onclick='chkimg()'>
</form>
</body>
</html>

もし、ブラウザなどの環境によらず正確な値を得たいのであれば、サーバ側で処理すべきだと思います。

- 0
- 件

通報する

No.1

回答者： MoguraSE
回答日時：2009/05/16 15:38

こんにちは。

img.srcにinput type=fileで指定したファイルを設定して
実行させてはいかがでしょう。

<html>
<head>
<script language="JavaScript">
var img = new Image();

function chkimg()
{
img.src = document.form.fname.value;
setTimeout('show()',1000);

}

function show()
{
alert(document.form.fname.value + "=" + img.width + "," + img.height);
}
</script>
</head>
<body>
<form action="javascript:chkimg()" name=form>
<input type=file name=fname><input type=submit value="表示">
</form>
</body>
</html>

setTimeoutを使っているのは、JavaScriptを実行中は画像の取得が行われず、img.widthとimg.heightの値がセットされないため、一旦スクリプトを終了させる必要があるからです。

この回答への補足

MoguraSE様

的確でわかりやすい回答をありがとうございます！
ただ、教えていただいた通りでスクリプトは実行できたのですが、
取得値が幅、高さ共に0pxになってしまいます。

当方でも調べてみますが、こちらの解決もわかるようであれば
ご教授願いたいのですが・・・

厚かましくて申し訳ございませんが、よろしくお願いします。

補足日時：2009/05/17 00:55

通報する