DataTransfer: files 屬性
DataTransfer 物件的只讀屬性 files 是拖放操作中檔案列表。如果操作中沒有檔案，則列表為空。
此功能可用於將檔案從使用者的桌面拖動到瀏覽器。
值
拖放操作中的檔案 FileList，操作中的每個檔案對應列表中的一項。如果拖放操作中沒有檔案，則列表為空。
示例
讀取檔案列表
此示例建立了一個基本區域，您可以將檔案拖放進去並顯示一些元資料。
html
<pre id="output">Drop files here from your file system.</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(`File Count: ${files.length}\n`);
for (const file of files) {
log(` File: ${file}, ${file.name}, ${file.size} bytes\n`);
}
});
規範
| 規範 |
|---|
| HTML # dom-datatransfer-files-dev |
瀏覽器相容性
載入中…