首页 >web前端 >js教程 >如何使用拖放自动填充输入文件的值?

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

DDD
DDD原创
2024-11-29 17:38:10437浏览

How Can I Automatically Populate an Input File's Value Using Drag and Drop?

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

背景:

出于安全原因,以前无法使用 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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn