如何在拖放后以编程方式设置文件输入的值？

将文件拖放到页面时如何设置文件输入值？

创建允许传统文件选择和拖动的文件输入控件时-and-drop，确保文件输入字段正确反映删除的文件非常重要。然而，由于安全问题，过去通过 JavaScript 设置文件输入值受到限制。

解决方案

值得庆幸的是，现代浏览器已经解决了这些安全漏洞，允许我们以编程方式调整 input[type="file"] 的 files 属性。这使我们能够模拟将文件拖放到文件输入字段中的效果。

实现细节

1. 处理拖放事件: 使用事件侦听器来监视所需目标元素（例如，文件输入字段周围的容器）。
2. 阻止默认操作：阻止默认拖放行为以自定义处理它。
3. 访问 DataTransfer 或 FileList： 对于删除的文件，从传递给事件的 e 对象中获取 dataTransfer 对象或 FileList handler.
4. 设置文件输入字段： 将目标文件输入字段的 files 属性分配给步骤 3 中获取的 dataTransfer.files 或 FileList。此操作将有效填充文件输入包含已删除文件的字段。

示例代码

这是一个 JavaScript 代码片段，演示了如何在将文件拖放到页面上时设置文件输入值：

let target = document.documentElement;
let body = document.body;
let fileInput = document.querySelector('input');

// Configure drag and drop event listeners
target.addEventListener('dragover', (e) => {
  e.preventDefault();
  body.classList.add('dragging');
});

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

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

  fileInput.files = e.dataTransfer.files;
});

使用此代码，您将能够设置文件输入值，允许通过文件输入字段选择文件或直接将文件拖放到指定区域之间进行无缝交互。

以上是如何在拖放后以编程方式设置文件输入的值？的详细内容。更多信息请关注PHP中文网其他相关文章！