HTML <input type = 'file'>ファイル選択イベント

143

次のコードがあるとします。

<form action='' method='POST' enctype='multipart/form-data'>
    <input type='file' name='userFile'><br>
    <input type='submit' name='upload_btn' value='upload'>
</form>

これはこれをもたらします：

参照およびアップロードボタンを示す画像

ユーザーが[参照...]ボタンをクリックすると、ファイル検索ダイアログボックスが開きます。

ファイルが選択されたファイル検索ダイアログボックスを示す画像

ユーザーは、ファイルをダブルクリックするか、[開く]ボタンをクリックしてファイルを選択します。

ファイルが選択された後に通知を受けるために使用できるJavascriptイベントはありますか？

javascript html javascript-events

— 月
ソース

5

なんてファンキーな古いウィンドウUI！

— El-Burritos

@ El-Burritosこれは2010年に投稿されました。もちろん、これは古いWindows UI：Dです

— Simon Cheng

180

changeイベントを聞いてください。

input.onchange = function(e) { 
  ..
};

— アヌラグ
ソース

3

私たちは、JavaScriptのスクリプトタグで...それをどこに書くつもり

— ムン

5

スクリプトタグ内で使用するか、属性（<input type="file" onchange="..." />）として追加することもできますが、これはお勧めできません。

— Anurag 2010

7

IE7と8では、「変更」イベントがフォームイベントにバブルアップしないことに注意してください。リスナーを<input>タグに配置する必要があります。

— xer0x 2011

36

ユーザーがファイルを「再ロード」する必要がある場合はどうでしょうか？onchangeはトリガーされませんが、初めてロードする場合と同様にリロードする必要があります。

— bryc 2015年

11

ファイルが変更されていないため、ユーザーが同じファイルを続けて2回以上選択した場合、これは機能しません。

— bob0the0mighty

45

ファイルをリロードする必要がある場合、入力の値を消去できます。次にファイルを追加したときに、「変更時」イベントがトリガーされます。

document.getElementById('my_input').value = null;
// ^ that just erase the file path but do the trick

— クレム
ソース

5

これは正常に動作しますが、IE <11の奇妙な動作に注意してください。入力の値を変更することはできないため、回避策が必要になる可能性があります。stackoverflow.com/questions/9011644/...

— オレクサンドルTkalenko

15

jQueryの方法：

$('input[name=myInputName]').change(function(ev) {

    // your code
});

— ザノン
ソース

3

キャンセルをクリックしても、変更イベントが呼び出されます。

— アンソニー
ソース

2

質問コードスニペットに記載されている変更イベントがないため、回答を説明するためのコードを提供すると役立ちます

— DevDig

@anthonyは次のシナリオを指していると思います：ファイルを選択してください。ファイルセレクターをもう一度開きますが、今度は[キャンセル]をクリックします。2回目にファイルが選択されなかったため、ファイル入力コントロールがリセットされ、最初の選択が変更され、changeイベントが発生します。

— dvlsc

Chrome 83で試してみましたが、[キャンセル]ボタンをクリックしてもイベントは発生しません。この回答はかなり古く、少なくともChromeでは修正されているはずです。

— Saeed Ahadian

3

それが私が純粋なJSでそれをした方法です：

var files = document.getElementById('filePoster');
var submit = document.getElementById('submitFiles');
var warning = document.getElementById('warning');
files.addEventListener("change", function () {
  if (files.files.length > 10) {
    submit.disabled = true;
    warning.classList += "warn"
    return;
  }
  submit.disabled = false;
});

#warning {
    text-align: center;
}

#warning.warn {
	color: red;
	transform: scale(1.5);
	transition: 1s all;
}

<section id="shortcode-5" class="shortcode-5 pb-50">
    <p id="warning">Please do not upload more than 10 images at once.</p>
    <form class="imagePoster" enctype="multipart/form-data" action="/gallery/imagePoster" method="post">
        <div class="input-group">
  	    <input id="filePoster" type="file" class="form-control" name="photo" required="required" multiple="multiple" />
	    <button id="submitFiles" class="btn btn-primary" type="submit" name="button">Submit</button>
        </div>
    </form>
</section>

スニペットを展開

— RegarBoy
ソース