File.name - ファイル名
nameは、Fileのプロパティです。ファイル名を文字列で返します。
概要
- 名前
- name
- 所属
- File
- IDL
readonly attribute DOMString name;
- 仕様書
- https://w3c.github.io/FileAPI/#dfn-name
説明
Fileのファイル名を文字列で返します。読み取り専用のため、値を代入して名前を変更することはできません。
チュートリアル
File.nameを取得する例です。syncer.txtというファイルをフォームの1つ目に選択した例です。
<input type="file" multiple id="hoge">
// 要素を取得
var element = document.getElementById( "input" ) ;
// FileListを取得
var fileList = element.files ;
// Fileを取得
var file = fileList[0] ; // 1個目のFile
// nameを取得
var name = file.name ; // "syncer.txt"
デモ
File.nameのデモです。1つ目に選択したファイルの名前を取得します。選択したファイルが当サーバーにアップロードされることはありません。
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<html>
<head>
<style>
div#result { white-space: pre-wrap ; }
input { width: 95% ; font-size: 16px ; }
</style>
</head>
<body>
<input type="file" multiple id="hoge">
<hr>
<div id="result"></div>
<script>
var element = document.getElementById( "hoge" ) ;
var resultElement = document.getElementById( "result" ) ;
element.onchange = function () {
var files = element.files ;
var file = files[0] ;
var value = file.name ;
console.log( value ) ;
resultElement.appendChild( new Text( "1個目のファイル名は" + value + "です!!" ) ) ;
}
</script>
</body>
</html>
サポート状況
Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|
● | ● | ● 7.1+ | ● | ● 10+ | ● 15+ | ● 8.3+ | ● 4.0+ |
関連記事
- FileReader.result
- resultは、FileReaderのプロパティです。読み込んだデータを返します。データの型は、読み込む時にどのメソッドを実行したかで変わります。
- FileList
- FileListは、ファイルの一覧を表すオブジェクトです。file typeのinput要素などから取得できます。
- 指定文字を置換、削除する
- 文字列の中の指定した部分を置換したり削除します。
- 先頭、末尾の文字を削除する
- 先頭、末尾の文字を削除します。