模拟文件拖入浏览器的拖动事件答案

【问题标题】：Simulating drag event of files dragged into browser模拟文件拖入浏览器的拖动事件
【发布时间】：2021-01-25 05:48:30
【问题描述】：

当您将文件从桌面拖到浏览器时，您可以使用 evt.dataTransfer.items[i].webkitGetAsEntry() 将文件检索为“FileEntry”

但是我感兴趣的是是否可以通过编程方式创建此事件：使用拖放事件传输文件（blob 或使用 File 构造函数创建），以便接收处理程序也可以以完全相同的方式提取它们？

在我的场景中，目标也可能是其他站点，因此不接受修改或任何不同的格式。

【问题讨论】：

标签： javascript file drag data-transfer drop

【解决方案1】：

有DataTransfer constructor，所以你可以很容易地创建一个，现在你只需要将add()一个File对象添加到它的items列表中：

const dataTransfer = new DataTransfer();
const file = new File( [ "some content" ], "text-file.txt" );
dataTransfer.items.add( file );

const event = new DragEvent( "drop", { dataTransfer } );

ondrop = (evt) => {
  const dT = evt.dataTransfer;
  console.log( dT.items[ 0 ], dT.items[ 0 ].webkitGetAsEntry() );
};

dispatchEvent( event );

【讨论】：

【解决方案2】：

如果有人想达到同样的效果 - 是的，这是可能的。通过使用 FileSystem API，您可以创建与从计算机中拖动相同的格式的文件。

【讨论】：

你能分享一个代码示例，以便将来这个答案对读者更有用吗？