如何使用拖放自动填充输入文件的值？

如何在页面上拖放时自动填充输入文件值

背景：

出于安全原因，以前无法使用 JavaScript 以编程方式设置输入文件的值。然而，随着浏览器技术的进步，这种情况已经发生了变化。

解决方案：

第 1 步：启用文件删除

将拖放事件监听器添加到所需的位置容器：

const target = document.getElementById("container");

target.addEventListener("dragover", (e) => {
  e.preventDefault();
  target.classList.add("dragging");
});

target.addEventListener("dragleave", () => {
  target.classList.remove("dragging");
});

第 2 步：分配文件值

从 dataTransfer 事件中捕获 FileList 对象：

target.addEventListener("drop", (e) => {
  e.preventDefault();
  target.classList.remove("dragging");

  const files = e.dataTransfer.files;
  document.getElementById("file-input").files = files;
});

替换“容器” " 为要启用拖放功能的容器元素的 ID，"file-input" 为输入文件的 ID

注意：

此方法适用于支持该规范的现代浏览器。

以上是如何使用拖放自动填充输入文件的值？的详细内容。更多信息请关注PHP中文网其他相关文章！