DOM

：

：

DataTransfer.files プロパティ

　編集：2022.10.20 by T.A.

[Edge]。→、、

ドラッグ操作中のファイルのリスト FileList を示します。

操作にファイルが含まれていない場合、リストは空になります。

この機能を利用して、ユーザーのデスクトップからブラウザーにファイルをドラッグすることができます。

メモ： DataTransfer オブジェクトの files プロパティは、drop イベントの中からのみアクセスできます。それ以外のどのイベントでも、files プロパティは空になります。その基礎となるデータ ストアがになるからです。

構文
DataTransfer.files
DataTransfer DataTransfer。
値

FileList。ドラッグ操作中のファイルのリストで、1 つのリスト項目が 1 つのファイルを表します。操作にファイルが含まれていない場合、リストは空になります。

例
drop イベントと effectAllowed

HTML： 

<IMG src="../../Sample/Picture.jpg"><BR>
<DIV id=IdTest contenteditable>ここにドロップ操作をしてみて…</DIV>
<SPAN id=IdLog></SPAN>

JavaScript： 

function Job(eve){  //drop イベントの処理：
  D=eve;
  DA=eve.dataTransfer.files;  //＝[object]：[object FileList]。DIV要素に画像ファイルをドロップした。
	//0＝[object]：[object File]
	//length＝[number]：1
	//item＝[function]：function item() { [native code] }
  IdLog.innerHTML=IdLog.innerHTML+eve.dataTransfer.files.length+" ";
}
document.ondrop=Job;  //イベントの割り当て。

エクスプローラーを開いて、そこの画像ファイルをドラッグ、DIV要素にドロップしたら files は得られた。

得たファイルのインデックス 0 は： 

//DA[0]＝[object]：[object File]
//name＝[string]：20221012.jpg
//lastModified＝[number]：1665921190046
//lastModifiedDate＝[object]：Sun Oct 16 2022 20:53:10 GMT+0900 (日本標準時)
//webkitRelativePath＝[string]：
//size＝[number]：97875
//type＝[string]：image/jpeg
//…

→File。

テスト