このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
DataTransfer: files プロパティ
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
files は DataTransfer オブジェクトの読み取り専用プロパティで、ドラッグ操作中のファイルのリストです。操作にファイルが含まれていない場合、リストは空になります。
この機能を利用して、ユーザーのデスクトップからブラウザーにファイルをドラッグすることができます。
メモ:
DataTransfer オブジェクトの files プロパティは、 drop および paste イベントの中からのみアクセスできます。それ以外のどのイベントでも、 files プロパティは空になります。その基礎となるデータストアが保護モードになるからです。
返値
ドラッグ操作中のファイルの FileList で、 1 つのリスト項目が 1 つのファイルを表します。操作にファイルが含まれていない場合、リストは空になります。
例
ファイルリストの読み取り
この例では、ファイルをドロップできる基本的な領域を作成し、いくつかのメタデータを表示します。
html
<pre id="output">ファイルシステムからここにファイルをドロップしてください。</pre>
css
#output {
min-height: 200px;
border: 1px solid black;
padding: 1em;
}
js
const output = document.getElementById("output");
function log(text) {
output.innerText += text;
}
output.addEventListener("dragenter", (e) => {
e.stopPropagation();
e.preventDefault();
output.textContent = "";
});
output.addEventListener("dragover", (e) => {
e.stopPropagation();
e.preventDefault();
});
output.addEventListener("drop", (e) => {
e.stopPropagation();
e.preventDefault();
const files = event.dataTransfer.files;
log(`ファイル数: ${files.length}\n`);
for (const file of files) {
log(` ファイル: ${file}, ${file.name}, ${file.size} バイト\n`);
}
});
[フレーム]
仕様書
| 仕様書 |
|---|
| HTML # dom-datatransfer-files-dev |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。