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>
<!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>
<!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>
結果
選択されたファイルの名前が表示されます。