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>

結果
選択されたファイルの名前が表示されます。

JavaScript

Posted by arkgame