質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.98%

IEのファイルアップロード時の参照ボタンのファイル選択後の挙動について

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 4,674

ebsffzal

score 79

お世話になっております。

ブラウザの制約がある環境の話で申し訳ないのですが、、

IE(ver8.0以上)でフォーム内のファイルアップロードボタンの挙動について
下記のような動作をさせることは、ブラウザの仕様上、可能でしょうか。

1.参照ボタンを押下
2.ファイル選択ダイアログを開く
3.ローカル内の任意のファイルを選択する
4.ファイル選択ダイアログが(自動的に閉じる)
5.このタイミングで元々いた画面のフォームをサブミットする
6.フォーム内の入力項目や、アップロードしたファイルをサブミットして次の画面に渡す

5について、javascriptを使って実現可能かどうかがわからないので
質問させていただきます。

よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

0

<form onsubmit="return ssss(this)">
    <input type="file" name="file" onchange="change(this)">
    <button onclick="button(this)" name="BTN">submit</button>
</form>
コード


ssss,button,change 各メソッドに alert しこんでください。
ssssは、最後に return false してください。
change は、最後に BTN をクリックしてください。
これでどういう順番でイベントが呼ばれるのか理解できます。
理解出来たらあとは工夫次第です。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/01/28 09:17

    ipadcaronさん

    回答ありがとうございました。
    サンプルコードを作って試したところ(ファイルアップは除く)、
    ファイルを参照した直後に走るメソッドがつかめました。

    あとはjavascriptからフォームの送信を動作させればいくはず・・・です。
    実際に検証サーバに設置して動作するところまで作ってみようと思います。

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

    キャンセル

  • 2016/01/28 10:59

    フォームの送信は、
    function submitByFileSelect(o) {
    o.form.submit();
    }
    タグ記述は、
    <input type="file" name="file" onchange="submitByFileSelect(this)" >
    で行けます。
    イベント伝播とイベント発生順序は途中でなにかの処理を割り込ませたいときに使えるかもしれません。
    BTN をクリックする、という指示は、js で記述すると、
    document.forms[0].BTN.click();
    が正解なんですが、
    button タグがsubmit 属性なので、クリックイヴェントでキャンセルしない場合、デフォルト動作のsubmit が動作して、onsubmit が実行されます。ssss メソッドで return false しろ、という指示は、本当にサブミットさせないために、イベントキャンセルさせる方法です。色々面倒だけど、覚えておくと今回に限らず役立つ機会があるかもしれません。

    キャンセル

0

私のは蛇足になります。
5の時点でサブミットするとのお話なので、その場合はそのサブミットでファイルのアップロードが行われます。
その為、6ではファイルのアップロードは行えません。

5のタイミングでアップロードされたファイルをサーバー上に保管し、
6のサブミットまでの保持と関連付けをしなければならないことに注意してください。

例えばc:\test.pngを選択してサブミットした場合、
サーバーがそのパスを受け取ってクライアントのPCに取りに行くのではなく、
ブラウザがファイルのバイナリとファイル名(test.png)をサーバーに送信します。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/01/28 09:20 編集

    libraplanetさん

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

    まだ完全に実装したわけではないですが、ファイル参照をした直後にjavascriptで
    送信を実行させることを想定しています。

    なのでサブミットボタンは設置せずに、ソース上でフォームの送信を
    する予定です。

    この後実際にやってみようと思います。
    ありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.98%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる