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

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

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

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

A 回答 (2件)

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>

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

こんにちは。



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
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qinput type="file"の幅と高さ

FireFox12で、ファイルを取り扱うフォーム部品のボックスの高さと幅が変更できません。
type属性がtextboxだとFireFoxでもCSSがちゃんと適用されます。

<input type="file" name="sample" class="test" />

.photo {
width:580px;
height:20px;
}

としていますが、IE8/9 Safari5.1.7/Chrom19では指定した幅と高さになるのですが
FireFoxだけ変化しません。

どうしようもないのでしょうか?

Aベストアンサー

こんにちは。

Firefoxのtype="file"については昔のバージョンからwidthやheightが効かないようです。
横幅だけならsize=""で変更できます、
高さは諦めるしかなさそうです。

Qのイベントについて

<input type="file">でファイルを選択した時点にイベントを追加する方法を教えてもらえませんか?
セキュリティの観点から無理なのでしょうか?

Aベストアンサー

ファイルを選択した時点で、
onchange イベントが起こりますので、
それを利用すればいいです。
例:
<form name="File">
<input type="file" name="UPLOADFILE" onchange="alert(document.File.UPLOADFILE.value)">
</form>

Qhtmlのfileタグに自動で値を入れる方法

htmlのタグでいって
<input type="file">を用いてファイルをサーバーにアップロードしたいと思っています。で、このとき、ファイル名は任意に選べるのではなく固定で送信したいと思っています。

すなわち、HTMLを読み込んだ時点で、fileのテキストボックスにファイルパスが埋め込まれているか、JavaScriptで、ファイルパスを自動入力するようにしたいと思っています。

最終的には、form内のオブジェクトをすべて非表示にし、onload時にsubmitするような形にしたいと思っています。いろいろ事情があって苦肉の策になっています…。

とりあえず(だめだとは思っていたのですが)
<input type="file" value="ファイルパス" name="filepath">
と直書きにしてみたり
document.all.filepath.value = "ファイルパス";
などとしてみたりしましたがだめでした…。
W3C勧告の使用上はvalueでファイルパスを指定できるようになっているようなのですが、現在の一般的なブラウザでは禁止されているようですね。

このような場合、何らかの方法でfileにファイルパスを自動入力することはできますでしょうか?
もしできない場合、何らかの方法で実現する方法はありますでしょうか?よろしくお願いします。

ちなみに実現できればいい環境は
WinXP環境のIE6です。言語はクライアント言語はJavaScriptのみで、という条件付です。
できないかもしれないのですが、こういうのって必要になるときもあるよなーなどと思っており、もしかしたら解決方法があるかもしれないと思い質問しました。よろしくお願いします。

htmlのタグでいって
<input type="file">を用いてファイルをサーバーにアップロードしたいと思っています。で、このとき、ファイル名は任意に選べるのではなく固定で送信したいと思っています。

すなわち、HTMLを読み込んだ時点で、fileのテキストボックスにファイルパスが埋め込まれているか、JavaScriptで、ファイルパスを自動入力するようにしたいと思っています。

最終的には、form内のオブジェクトをすべて非表示にし、onload時にsubmitするような形にしたいと思っています。いろいろ事情があって苦肉...続きを読む

Aベストアンサー

やっぱ無理じゃないでしょうか。
なにか裏ワザ的な方法で一時的にできたとしても、いつか直されるかもしれないのでおいそれとは使えないし。

>W3C勧告の使用上はvalueでファイルパスを指定できるようになっている
→参考URL 「ユーザが明示的に送信を求めたファイル以外のものは送ってはいけない」とあります。

参考URL:http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/appendix/notes.html#forms-security

Qで配列(複数の要素)を渡したいとき?

こんにちわ,

今HTML+PHPで
$hoge[]にいくつかの要素が入っているとき,
それをあるfoo.phpというページに渡したいとき,
echo '<form action="foo.php" method="POST">';
echo '<input type="hidden" name="$hoge[]" >';
echo '</form>';
としたのですが,うまくいきません。

どうしたらよろしいでしょうか。

Aベストアンサー

nameじゃなく、valueでは?
あとやるなら、
for($i=0;$i<count($hoge);$i++){
print "<input type=\"hidden\" name=\"$hoge[$i][0]\" value=\"$hoge[$i][1]\">";
}
とか?

Qjavascriptでセレクトボックスの"selected"を動的につ

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
</select>月

<select name='day'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
<option value='13'>13</option>
<option value='14'>14</option>
<option value='15'>15</option>
<option value='16'>16</option>
<option value='17'>17</option>
<option value='18'>18</option>
<option value='19'>19</option>
<option value='20'>20</option>
<option value='21'>21</option>
<option value='22'>22</option>
<option value='23'>23</option>
<option value='24'>24</option>
<option value='25'>25</option>
<option value='26'>26</option>
<option value='27'>27</option>
<option value='28'>28</option>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日


このセレクトボックスに、例えば今日の日付"2010年9月30日"だったら、それぞれの年、月、日の<option>に"selected"をつけたいのですが、javascriptではどのようにして実現したら良いのでしょうか?

よろしくお願いします。

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8...続きを読む

Aベストアンサー

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<option value='2009'>2009</option>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
</select>月

<select name='day'>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日
</div>
</form>

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<opt...続きを読む

QjQueryでクリックされた要素のidを関数で取得

以下のようなソースで、クリックされた要素のidをアラートで出したいとき、class: alphabetのa要素ををクリックすると、undefinedと出ます。
関数でthisを使うと呼び出し元のことを指さないので、クリックされた要素のidは出ないということなのですが、こういった場合、クリックされた要素のidを取得して、表示したい場合はどのようにすればよいか教えてください。

[htmlソース]
<a class='alphabet' id='a' href='' onclick="return false;">A</a>
<a class='alphabet' id='b' href='' onclick="return false;">B</a>
<a class='alphabet' id='c' href='' onclick="return false;">C</a>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.alphabet').click(function(){
function alertAlphabet(){
alert($(this).attr('id'));
};
alertAlphabet();
});
});
</script>

以下のようなソースで、クリックされた要素のidをアラートで出したいとき、class: alphabetのa要素ををクリックすると、undefinedと出ます。
関数でthisを使うと呼び出し元のことを指さないので、クリックされた要素のidは出ないということなのですが、こういった場合、クリックされた要素のidを取得して、表示したい場合はどのようにすればよいか教えてください。

[htmlソース]
<a class='alphabet' id='a' href='' onclick="return false;">A</a>
<a class='alphabet' id='b' href='' onclick="return false;">...続きを読む

Aベストアンサー

イベントハンドラ・匿名関数と外部関数定義のタイミングが変じゃないですか?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('.alphabet').click(function () {
// 直接指定
alert($(this).attr('id'));
// 関数経由
alertAlphabet($(this));
});
});
function alertAlphabet(obj) {
// objはjQueryオブジェクト
alert(obj.attr('id'));
};
</script>
</head>
<body>
<a class='alphabet' id='a' href='' onclick="return false;">A</a>
<a class='alphabet' id='b' href='' onclick="return false;">B</a>
<a class='alphabet' id='c' href='' onclick="return false;">C</a>
</body>
</html>

イベントハンドラ・匿名関数と外部関数定義のタイミングが変じゃないですか?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('.alphabet').click(function () {
// 直接指定
alert($(this).attr('id'));
// 関数経由
alertAlphabet($(this));
});
});
function alertAlphabet(obj) {
// objはjQu...続きを読む

Qforeachで回った数を表示したい

単純な質問ですみません。
====
//getTestlistは別ファイルで定義済み。
<?
$testlist=getTestlist();
foreach($testlist as $test){
?>


<? } ?>
====
例えば↑こんなふうにforeachで$testlistが存在するだけ回したとします。
そのときに何回まわったか?($testが何件あったか?)だけを表示したいのですが、そんなことってできますか?
表示したい位置は<? } ?>の外側にと考えています。
あさってな質問でしたらすみません。
phpVer 4.3

よろしくお願いいたします。

Aベストアンサー

<?
$testlist=getTestlist();
$n=0;
foreach($testlist as $test){
$n++;
?>
<?}?>

<?=$n?>回
とかでよいかと思います。

途中でbreakなどが無ければ
<? echo count($testlist) ?>でも良いかも知れません。

QJavaScriptのfileオブジェクト(input type="file")の選択を初期化したい

fileでユーザーが選択したファイルを、未選択の状態にしたいのですができません。

valueプロパティを""にしてもnullにしても、元の値(ファイルパス)が入ったままです。

HTML:
<input type="file" name="picture_file">

JavaScript:
document.form_main.picture_file.value = "";
alert(document.form_main.picture_file.value);
document.form_main.picture_file.value = null;
alert(document.form_main.picture_file.value);

どうにかして初期化する方法はありますでしょうか?file以外のほかのinput項目は変更せず、また画面遷移もせず実現する必要があります。

Aベストアンサー

type="file"のvalueはセキュリティ上の制約でいぢる事はできません。
http://d.hatena.ne.jp/Mars/20071102
↑こちらのようなやり方しかないかと思います。

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

QPHPでタグ内からURLと文字を抜き出したい

PHP4.3で
$html_tag = '<a href="http://www.hogehoge.com/hogehoge/hoge/sample.html" class="hogehoge" title="hogehoge">りんく先名称</a>';
というような変数から
「http://www.hogehoge.com/hogehoge/hoge/sample.html」
のURLと
「りんく先名称」という<a>で囲まれた文字列を抜き出したいのです。

preg_matchを使っていろいろやってみたのですが、どうもうまくいきません。というか、正規表現がどのように書いていいのかわからないのですが・・・
そもそもpreg_matchを使わずとも簡単な方法があるのでしょうか?

大変恐れ入りますが、ご教授いただけませんでしょうか?

Aベストアンサー

この例をもとにして思いっきりはしょって書くと

<?
$html_tag = '<a href="http://www.hogehoge.com/hogehoge/hoge/sample.html" class="hogehoge" title="hogehoge">りんく先名称</a>';
preg_match("|<a href=\"(.*?)\".*?>(.*?)</a>|mis",$html_tag,$matches);
$url=$matches[1];
$text=$matches[2];
?>


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報