JavaScript addEventListenerで選択されたファイルの名前を取得するサンプル
環境
Windows 10 home 64bit
Google Chrome 107.0.5304.122(Official Build) (64 ビット)
構文
1.addEventListenerイベントの追加
document.getElementById(セレクタID).addEventListener('change’,関数名,false);
2.ファイルの名前を取得します
Event.target.files[0].name
使用例
<!DOCTYPE html> <html> <body> <input type="file" id="upload"> <script> function funA(e){ alert("選択したファイル名:"+e.target.files[0].name); } document.getElementById("upload").addEventListener('change',funA,false); </script> </body> </html>
結果
選択されたファイルの名前が表示されます。