DataTransfer: thuộc tính files

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Thuộc tính files chỉ đọc của đối tượng DataTransfer là danh sách các tệp trong thao tác kéo. Nếu thao tác không bao gồm tệp nào, danh sách sẽ rỗng.

Tính năng này có thể được sử dụng để kéo tệp từ màn hình nền của người dùng vào trình duyệt.

Note: Thuộc tính files của đối tượng DataTransfer chỉ có thể được truy cập từ bên trong các sự kiện drop và paste. Đối với tất cả các sự kiện khác, thuộc tính files sẽ rỗng, vì kho dữ liệu bên dưới sẽ ở chế độ được bảo vệ.

<pre id="output">Drop files here from your file system.</pre>

css

#output {
  min-height: 200px;
  border: 1px solid black;
  padding: 1em;
}

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`);
  }
});