- PR -

ファイルアップロードでのショートカットキー抑止

1|2 次のページへ»
投稿者投稿内容
Dra
大ベテラン
会議室デビュー日: 2004/10/04
投稿数: 111
投稿日時: 2004-10-25 14:27
WEBシステムの画面でショートカットキーの抑止をしようとしましたがうまくいきません。

IE6.0でJavaScriptでfile(ファイルアップロードオブジェクト)を使用しているのですが、
ファイルアップロードオブジェクトの、Text部もしくは、参照ボタン部にカーソルを当てた状態で
「F5」、「F11」ボタンを押下した時にイベントを無効化したいのですが、現状ではエラーメッセージを表示した後に「F5」でリロード処理、「F11」で画面最大化処理が走ってしまいます。
ソースは以下のとおりです。

function KeyDown(){
var ev = window.event;
var elem = ev.srcElement;
switch (ev.keyCode) {
case 27:
case 116:
case 122:
// ファイルアップロードオブジェクト対象
if ((elem.tagName.toUpperCase()=="INPUT") && (elem.type.toUpperCase()=="FILE")) {
alert("エラーメッセージ表示");
return false;
}
// その他対象
alert("エラーメッセージ表示");
ev.keyCode = 0;
return false;
}
}


アドバイスお願いします。
ゆう
常連さん
会議室デビュー日: 2003/06/27
投稿数: 45
投稿日時: 2004-10-25 16:04
　テキストフィールドと通常のボタンでは「F5」「F11」ボタンのイベントを制御
できるようなので、ファイルフィールドとは別にテキストフィールドとボタンを
追加し、そこからファイルフィールドを制御してはいかがでしょうか。
　ソースの例を記載しておきます。

<input id="chooser" type="file"
style="display:none;"
onchange="document.getElementById('path').value = this.value;" />
<input id="path" type="text" size="50"
onkeydown="KeyDown();"/>
<button
onclick="document.getElementById('chooser').click()"
onkeydown="KeyDown();">参照...</button>
Dra
大ベテラン
会議室デビュー日: 2004/10/04
投稿数: 111
投稿日時: 2004-10-25 16:44
悠さん返答ありがとうございます。

引用: --------------------------------------------------------------------------
ファイルフィールドとは別にテキストフィールドとボタンを
追加し、そこからファイルフィールドを制御してはいかがでしょうか。
--------------------------------------------------------------------------------

つまり、ファイルフィールドとして持つのではなく、テキストフィールドとボタンにファイルフィールドの機能を持たせるということでしょうか？
それとも違う意味でしょうか？
知識が浅いのでもう少し詳しく教えて頂けたら嬉しいです。
お願いします。

ゆう
常連さん
会議室デビュー日: 2003/06/27
投稿数: 45
投稿日時: 2004-10-25 17:17
引用:

つまり、ファイルフィールドとして持つのではなく、テキストフィールドとボタンにファイルフィールドの機能を持たせるということでしょうか？
それとも違う意味でしょうか？



　そんな感じですが、ファイルフィールド自体は存在します。
　テキストフィールドにファイルフィールドの機能を持たせるのではなく、ボタンから
ファイルフィールドの動作を制御します。

　ファイルフィールド自体は存在しますが、画面上からは見えないように隠しておき､
ボタンがクリックされた際にファイルフィールドのクリックイベントを実行させます。
そして、ファイルフィールドに入力された値をテキストフィールドへ反映させます。

　この時、テキストフィールドの値をファイルのパスとして使用するようにしておけ
ば、ユーザーからの入力指定も可能となり、ファイルフィールドの機能も取り込めま
す。


【ファイルフィールド】
<input id="chooser" type="file"
style="display:none;"
onchange="document.getElementById('path').value = this.value;" />

　スタイルにdisplay:noneを指定しておき、ユーザーからは見えないようにします。
また、onchangeイベントにより、ファイルフィールドの値が変更された際に、その値
をテキストフィールドに反映させます。


【テキストフィールド】
<input id="path" type="text" size="50"
onkeydown="KeyDown();"/>

　ファイルフィールドの値を受け持ちます。
　submitボタン押下時、テキストフィールドの値をファイルパスとして処理します。


【ボタン】
<button
onclick="document.getElementById('chooser').click()"
onkeydown="KeyDown();">参照...</button>

　onclickイベント発生時、click()を実行してファイルフィールドのクリックイベント
を発生させ、ファイルダイアログを表示させます。


かつのり
ぬし
会議室デビュー日: 2004/03/18
投稿数: 2015
お住まい・勤務地: 札幌
投稿日時: 2004-10-25 19:50
ファイルアップロードのフォームは、
スクリプトで値を設定できませんよ。

仮にできてしまうと、悪意のあるページで、

１・見えないファイルアップロードのフォームを仕込む
２・スクリプトでファイルアップロードのフォームの値に
　　ローカルにありそうなヤバめのファイルを設定
３・悪意のあるサーバに送信

ってことができちゃいます。

display:noneにしていたら、onChangeイベントを発生させることもできないような・・・
Dra
大ベテラン
会議室デビュー日: 2004/10/04
投稿数: 111
投稿日時: 2004-10-26 09:35
悠さん、かつのりさんアドバイスありがとございました。

とりあえずは、悠さんの案でやっていこうと思っとります。
また、分からない事があった時は書き込むかもわかりませんが、その時はまたアドバイスお願いします。
ゆう
常連さん
会議室デビュー日: 2003/06/27
投稿数: 45
投稿日時: 2004-10-26 09:35
引用:

かつのりさんの書き込み (2004-10-25 19:50) より:
ファイルアップロードのフォームは、
スクリプトで値を設定できませんよ。

仮にできてしまうと、悪意のあるページで、

１・見えないファイルアップロードのフォームを仕込む
２・スクリプトでファイルアップロードのフォームの値に
　　ローカルにありそうなヤバめのファイルを設定
３・悪意のあるサーバに送信

ってことができちゃいます。

display:noneにしていたら、onChangeイベントを発生させることもできないような・・・



　ファイルアップロードのフォームから値を取得するだけなので、設定はしてない
です。テキストのフォームにファイルアップロードの値を設定してます。

　また、ブラウザごとに動作を確認してみました。
　IE6.0では動作しますが、OperaやFirefoxでは動きません。
（フォームのメソッドをGETにして実行してみましたが、IEでは値も渡せてます）

　Draさんの想定している環境がIE6.0なら大丈夫だと思いますが、WEBシステムが
ブラウザに依存しちゃうのはやっぱりまずいかな……。

Dra
大ベテラン
会議室デビュー日: 2004/10/04
投稿数: 111
投稿日時: 2004-10-26 13:41
お世話になります。

悠さんのアドバイス通りに行なうことによって、ショートカットキーの抑止はうまくいきました。ありがとうございます。

しかし、1点問題が出てきてしまいました。
実はテキストに入力されたファイルを「送信」ボタンを押下することにより、サーバ側に処理を飛ばしたかったのですが、1回目に「送信」ボタンを押下してもサーバ処理に移動してくれません。2回目に「送信」ボタンを押下するとサーバ側に処理は飛ぶのですが、ファイルをStreamしてくれません。


アドバイスお願いします。
1|2 次のページへ»

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