SYNCERのロゴ
アイキャッチ画像

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>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
7.1+ 10+ 15+ 8.3+ 4.0+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月4日 (水)
コンテンツを公開しました。