- PR -

＜input type="file"＞ に手入力したときの動き

1|2 次のページへ»
投稿者投稿内容
rain
ぬし
会議室デビュー日: 2006/10/19
投稿数: 549
投稿日時: 2007-12-28 10:11
開発はASP.NET2.0なのですが、HTMLレベルの動作な気がするのでこちらに投稿しました。
OSはWindowsXP、ブラウザはIE6です。

ASP.NETの画面にファイルのアップロード用のコントロールを貼り付けているのですが、
利用者が間違えて、そこに手入力でおかしな文字列(hogeとか)を入力したときに、
ポストバックがかからないという現象にあっています。

調べた結果、<input type="file"> にname属性をつける/つけないで
submitされる/されないの挙動が変わることまでは突き止めました。
また、FireFox(2.0.0.7)ではどちらの場合もsubmitされることもわかりました。
コード:
<html>
<body>
  <form method="post" action="#">
    <input type="file" name="file1" />←変な入力をするとsubmitがされない<br/>
    <input type="file" />←変な入力をしてもsubmitがされる<br/>
    <input type="submit" />
  </form>
</body>
</html>


が、開発自体はASP.NETなので、name属性を消すわけにもいかず、
ブラウザはIE6と決めて開発しているので、今更変えるわけにもいきません。

とりあえず、利用者へは「IEの仕様」で説明するつもりなのですが、
現象としては気になるので、何か情報がいただければと思い、投稿しました。
よろしくお願いします。

# 書いているうちにjavascriptでチェックできる可能性を考えましたが、
# これはまだ試してません。
なぎさ。
会議室デビュー日: 2007/12/21
投稿数: 9
お住まい・勤務地: カンサイ
投稿日時: 2007-12-28 11:11
Input type = file 属性の入力フォームにて submit を行っても Web サーバーから反応がない

XPSP2のセキュリティ上の問題のようです

またJavaScriptからも<input type="file">に対してアクセスできないようになっています
これもまたセキュリティ上

rain
ぬし
会議室デビュー日: 2006/10/19
投稿数: 549
投稿日時: 2007-12-28 11:42
なぎさ。さん。情報ありがとうございます。

リンク先の文書を読みました。OSは Windows XP Professional SP2 です。
Firefoxで再現しないところから推測すると、OSがSP1からSP2にアップデートしたときに
IE6の動作がそのように変わったのですね、きっと。

name属性の有無で動きが変わる点がまだしっくりこないのですが、
OSおよびIEの仕様なのでどうしようもない、ということは説明できそうです。
ありがとうございます。
なぎさ。
会議室デビュー日: 2007/12/21
投稿数: 9
お住まい・勤務地: カンサイ
投稿日時: 2007-12-28 11:59
nameの有無は
PG言語で言う変数の宣言の有無と同じものなのでしょう

nameがあるからこそvalueが存在できるので
<form>から認識してもらえないのではないでしょうか

type="text"や
type="hidden"のname無しもsubmitは動きますが値そのものは送信されませんでした

<form>から認識されて初めてsubmitされて
submitを行う途中にtype=fileがある場合ファイルパスが正しいかどうかチェックが行われている

ファイルアップロードはそれなりにリスクが伴いますからセキュリティが高いのは当然なのでしょうね
rain
ぬし
会議室デビュー日: 2006/10/19
投稿数: 549
投稿日時: 2007-12-28 13:13
nameがダメならidなら取得できるかな？ と思い、
実際にこんなHTMLを書いてみました。

コード:
<html>
<script>
function writeValue() {
  var text = document.getElementById("file1").value + '<br>' + document.getElementById("text1").value;
  document.write(text);
}
</script>
<body>
  <form name="form1" method="post" action="#">
    ファイル：<input type="file" id="file1" /><br/>
    テキスト：<input type="text" id="text1" /><br/>
    <input type="submit" onclick="writeValue();" />
  </form>
</body>
</html>


これに何かしら文字列を入力をしてsubmitボタンを押すと、
type=fileの場合でも入力した文字列を取得することができました。

なので入力文字列をチェックして、書式が変だったら
アラートを表示するようなJavaScriptを仕込むことができれば、
利用者に知らせることは可能かな、と考えた次第です。
画面上で知らせられればいいので、submitで値が送信されなくてもとりあえずは問題ありません。
# 私の書いたコードで、値が送信されたのか、されてないのかはよく理解していません。

ただ実際にはASP.NETなので、nameを無くすのはたぶん無理だと思いますが...
末記人
大ベテラン
会議室デビュー日: 2005/12/05
投稿数: 233
お住まい・勤務地: あわにこ
投稿日時: 2007-12-28 15:03
こんにちは

値のチェックをするなら form の onSubmitを使ったほうがいいと思います。

コードを少し改造
コード:
<html>
<script>
function writeValue() {
  var text = document.getElementById("file1").value + '<br>' + document.getElementById("text1").value;
  document.getElementById("disp").innerHTML = text;
  return false; //
}
</script>
<body>
  <form name="form1" method="post" action="#" onSubmit="return writeValue();">
    ファイル：<input type="file" id="file1" /><br/>
    テキスト：<input type="text" id="text1" /><br/>
    <input type="submit" />
  </form>
  <div id="disp" style="border: solid 1px #000000; width:200px;height:200px;"">結果表示</div>
</body>
</html>


onSubmit="return 関数();" と書くことで関数戻り値が falseだった場合に
Submitを抑止できます。
関数内でエラーが発生するとSubmitされちゃうんですけどねｗ
rain
ぬし
会議室デビュー日: 2006/10/19
投稿数: 549
投稿日時: 2007-12-28 16:33
すみません。今になって

引用:

なぎさ。さんの書き込み (2007-12-28 11:59) より:
nameの有無は
PG言語で言う変数の宣言の有無と同じものなのでしょう

nameがあるからこそvalueが存在できるので
<form>から認識してもらえないのではないでしょうか

type="text"や
type="hidden"のname無しもsubmitは動きますが値そのものは送信されませんでした



このご指摘が理解できました。
実際にサンプルのコードを使ってpostさせて、post先で値を確認したのですが、
値が入っていないことを確認しました。

その後、末記人さんのコードを参考にして、こんな形のコードになりました。

正しいファイルパスを指定した場合：
・check()がtrueを返す＆正しいパスなので、Submitがかかる
正しくないファイルパスを指定した場合：
・check()のところでエラーメッセージを出力する。
・check()は一応falseを返しているが、IEの機能でSubmitは行われない
といった感じで、期待通りの動作になるかなと思っています。

コード:
<html>
<script>
function check()
{
    if (!isFile(document.getElementById("file1").value) )
    {
        document.getElementById("disp").innerHTML = "正しいファイルを指定してください";
        return false;
    }
    
    return true;
}

function isFile(path) {
    // pathの書式チェックをして、ファイルパス形式だったらtrueを、
    // そうでない場合はfalseを返すつもり
    return false;
}
</script>
<body>
  <form name="form1" method="post" action="Default.aspx" onsubmit="return check();">
    ファイル：<input type="file" name="file1" id="file1" /><br/>
    テキスト：<input type="text" name="text1" id="text1" /><br/>
    <input type="submit" />
  </form>
  <div id="disp" style="border: solid 1px #000000; width:200px;height:200px;">結果表示</div>
</body>
</html>


なぎさ。さん、末記人さん、ありがとうございました。
だーて
常連さん
会議室デビュー日: 2007/12/18
投稿数: 20
お住まい・勤務地: ここはどーこ？私はだーて
投稿日時: 2007-12-29 00:11
こんばんは。

＃すっかり出遅れた感が否めませんが・・・。

<input type="file" />　を
<input type="file" onKeyDown="return false;" />　にしてしまえば、手動入力を防ぐことができます。

＃NOTユーザビリティですが。
＃ファイルパスのチェックが面倒であれば、これで逃げる手も（笑）

_________________
普通？常識？何ですかそりは。
日本語は難しい・・・。
1|2 次のページへ»

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