DataTransfer.files - ファイルの一覧

2017/10/11

filesは、DataTransferのプロパティです。転送中のファイルの一覧をFileListで返します。

概要

名前

files

所属

IDL

[SameObject] readonly attribute FileList files;

仕様書

https://html.spec.whatwg.org/multipage/dnd.html#dom-datatransfer-files

説明

転送中のファイルをFileListで返す。

デモ

DataTransfer.filesのデモです。何かローカルファイルをドラッグ操作でドロップしてみて下さい。ファイル名を表示します。そのファイルが当サイトのサーバーにアップロードされるようなことはありません。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<style>
div#hoge {
	width: 250px ;
	text-align: center ;
	padding: 24px 12px ;
	background-color: blue ;
	color: #fff ;
}

div#result {
	white-space: pre-wrap ;
}
</style>
</head>
<body>
<div id="hoge">drop here!</div>
<hr>
<div id="result"></div>
<script>
var element = document.getElementById( "hoge" ) ;

var callbackFn1 =  function ( event ) {
	event.preventDefault() ;
} ;

var callbackFn2 =  function ( event ) {
	event.preventDefault() ;

	var dataTransfer = event.dataTransfer ;
	var fileList = dataTransfer.files ;

	console.log( fileList ) ;

	resultElement.innerHTML = "" ;

	for ( var i=0,l=fileList.length; l>i; i++ ) {
		resultElement.appendChild( document.createTextNode( "[" + i + "] " + fileList[i].name + "\n" ) ) ;
	}
} ;

element.ondragover = callbackFn1 ;
element.ondrop = callbackFn2 ;

var resultElement = document.getElementById( "result" ) ;
</script>

</body>
</html>