- PR -

[JavaScript]入力ﾌｧｲﾙ(input type="file")の入力チェック方法について

1
投稿者投稿内容
ごろう
ベテラン
会議室デビュー日: 2006/12/06
投稿数: 50
お住まい・勤務地: 神奈川県横浜市　横浜駅の海方面
投稿日時: 2007-12-06 11:53
Java+Strutsの組み合わせでWebｱﾌﾟﾘｹｰｼｮﾝを作成しています。

下記のｺｰﾄﾞでファイル名の入力ボックス＋参照ボタンを作成し、
ファイル名の入力ボックスが未入力なら、
submitしないようにしたいのですがうまくいきません。

len = window.document.forms['form1Form'].getElementByName("fileName").value.length;
の行で止まってしまっているようなのですが、なぜなのでしょうか？


function checkInput(){
len = window.document.forms['form1Form'].getElementByName("fileName").value.length;
　if(0==len){
　　return false;
　}
　return true;
}

<html:form action="/form1">
アップロードファイル：<html:file property="fileName"/>
<html:submit value=" 送信" onclick="return checkInput();"></html:submit>
</html:form>


actionの設定は下記のようになっています。
struts-config.xml
<action-mappings>
<action path="/form1" type="xxx.webapp.action.Form1Action" name="form1Form" input="/001.jsp" scope="request">
<forward name="success" path="/002.jsp"/>
</action>
<form-beans>
<form-bean name="form1Form" type="xxx.webapp.action.Form1Form"/>
</form-beans>

[ メッセージ編集済み 編集者: ごろう 編集日時 2007-12-06 11:56 ]
sawat
大ベテラン
会議室デビュー日: 2006/08/02
投稿数: 112
投稿日時: 2007-12-06 12:31
getElementsByName()はエレメントそのものではなくエレメントのリスト（配列のようなもの）を返します。同じname属性のエレメントが複数あれば、それを全部返すわけです。
name="fileName"のエレメントが一つしかないなら、以下のようにリストの0番目をしてすれば上手くいくでしょう。
getElementsByName("fileName")[0].value.length;

もしくは、inputタグにidを設定してdocument.getElementById(id)を使いましょう。こちらは単一のエレメントを返します。

ちなみにgetElementByNameではなく、getElementsByNameですよ。戻り値が複数なので、メソッド名も複数形なのです。

[ メッセージ編集済み 編集者: sawat 編集日時 2007-12-06 12:32 ]
ごろう
ベテラン
会議室デビュー日: 2006/12/06
投稿数: 50
お住まい・勤務地: 神奈川県横浜市　横浜駅の海方面
投稿日時: 2007-12-06 16:19
引用:

sawatさんの書き込み (2007-12-06 12:31) より:
name="fileName"のエレメントが一つしかないなら、以下のようにリストの0番目をしてすれば上手くいくでしょう。
getElementsByName("fileName")[0].value.length;

ちなみにgetElementByNameではなく、getElementsByNameですよ。戻り値が複数なので、メソッド名も複数形なのです。

[ メッセージ編集済み 編集者: sawat 編集日時 2007-12-06 12:32 ]

回答ありがとうございました。

ただ、
len = window.document.forms['form1Form'].getElementsByName("fileName")[0].value.length;
として、以下の通りのｺｰﾄﾞでやってみましたが、
まだ上記のｺｰﾄﾞで落ちてしまいます。
（ファイル名を空白にして送信ボタン押したら次のページに行ってしまう。）

何か設定が悪かったりするのでしょうか？


function checkInput(){
len = window.document.forms['form1Form'].getElementsByName("fileName")[0].value.length;
　if(0==len){
　　return false;
　}
　return true;
}

<html:form action="/form1">
アップロードファイル：<html:file property="fileName"/>
<html:submit value=" 送信" onclick="return checkInput();"></html:submit>
</html:form>


actionの設定は下記のようになっています。
struts-config.xml
<action-mappings>
<action path="/form1" type="xxx.webapp.action.Form1Action" name="form1Form" input="/001.jsp" scope="request">
<forward name="success" path="/002.jsp"/>
</action>
<form-beans>
<form-bean name="form1Form" type="xxx.webapp.action.Form1Form"/>
</form-beans>
unibon
ぬし
会議室デビュー日: 2002/08/22
投稿数: 1532
お住まい・勤務地: 美人谷　　　　　　　　良回答(20pt)
投稿日時: 2007-12-06 17:02
引用:

ごろうさんの書き込み (2007-12-06 16:19) より:
ただ、
len = window.document.forms['form1Form'].getElementsByName("fileName")[0].value.length;
として、以下の通りのｺｰﾄﾞでやってみましたが、
まだ上記のｺｰﾄﾞで落ちてしまいます。
（ファイル名を空白にして送信ボタン押したら次のページに行ってしまう。）

何か設定が悪かったりするのでしょうか？

良くは知らないのですが、最近のブラウザーだと、type="file" の input の領域を読めなくなったのではないでしょうか。
(昔は書き込みだけが制限されていましたが、あらたに読み出しも制限されるようになった。)

件名：「ASP.NETでのファイルアップロードについて」
http://www.atmarkit.co.jp/bbs/phpBB/viewtopic.php?topic=31515&forum=7

でもそのようなことが書かれていました。
AOFG
会議室デビュー日: 2007/09/07
投稿数: 11
投稿日時: 2007-12-06 17:05
参考になるか分かりませんが、自分は
困ったらブラウザのアドレスバーに

javascript:alert(window.document.forms['form1Form'])
javascript:alert(window.document.forms['form1Form'].getElementsByName("fileName"))
javascript:alert(window.document.forms['form1Form'].getElementsByName("fileName")[0])
javascript:alert(window.document.forms['form1Form'].getElementsByName("fileName")[0].value)
javascript:alert(window.document.forms['form1Form'].getElementsByName("fileName")[0].value.length)

のように順番に入力して、どこまで正しく取れているかを調べます

[ メッセージ編集済み 編集者: AOFG 編集日時 2007-12-06 17:06 ]
ごろう
ベテラン
会議室デビュー日: 2006/12/06
投稿数: 50
お住まい・勤務地: 神奈川県横浜市　横浜駅の海方面
投稿日時: 2007-12-06 18:01
ご助言ありがとうございました。

いろいろ試した結果、
strutsの設定が足りなかった事が判明しました。

JavaScriptの質問でstrutsの設定ミスだった事、大変申し訳ありません。

<誤>
<html:form action="/form1">

<正>
<html:form action="/form1" enctype="multipart/form-data">

formタグに 「enctype="multipart/form-data"」という設定が必要でした。
デフォルトだと「enctype="application/x-www-form-urlencoded"」が設定されていて、
アップロードに失敗するみたいです。


場違いなJava関連の設定ミス、申し訳ありませんでした。
1

スキルアップ／キャリアアップ（JOB@IT）