如何通过拖放以编程方式设置文件输入值？

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

尝试创建一个控件，用户可以在其中手动选择和删除文件来提交表单时，您遇到了一个问题：删除文件时文件输入仍为空。虽然以前出于安全考虑不允许以编程方式设置文件输入值，但现代浏览器已经解决了这些漏洞。

解决方案：利用 DataTransfer 或 FileList

您现在可以设置文件输入值在现代浏览器上，通过利用 dataTransfer 或 FileList 对象。自 2017 年 12 月起，Firefox 和其他主要浏览器允许以编程方式进行文件输入操作。

方法：

1. 防止 Dragover 和 Dragleave 事件上的默认事件行为以启用文件输入交互。

2. 掉落event:

   • 将 fileInput.files 设置为等于从 e.dataTransfer.files 获取的已删除文件。这会将拖放到页面上的文件分配给文件输入。
3. 删除指示用户正在拖动的视觉提示。

示例：

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

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中文网其他相关文章！