js 拖拽上传文件夹

需求

获取拖拽到指定元素上的文件夹中的文件，并需要知道相对地址。

项目地址

https://github.com/156ban/droped-file-and-folder-reader
（服务器中运行）

注意

一些方法在mdn上是实验性技术，请在生产中使用它之前仔细检查浏览器兼容性表。

个人在mac上测试发现谷歌，火狐，safiri浏览器上测试时可以用的（其他未知）。

方法介绍（查询自mdn）

首先我们根据drop事件得到event.dataTransfer

常用的获取文件方式是使用dataTransfer.files获取文件列表，但这样无法直接获取文件夹中的文件。

dataTransfer还有一个DataTransfer.items的属性，可以得到一个包含所有拖动数据列表的 DataTransferItemList 对象。

DataTransferItemList的每一项是DataTransferItem，DataTransferItem拥有一个webkitGetAsEntry()方法,如果DataTransferItem表示的是文件，则webkitGetAsEntry()返回FileSystemFileEntry(文件)或FileSystemDirectoryEntry(文件夹)，这两个对象都有isDirectory和isFile两个boolean值方便判断。

我们得到了FileSystemDirectoryEntry，FileSystemDirectoryEntry拥有一个createReader方法，createReader()返回一个 FileSystemDirectoryReader可以被用于读取在该目录中的条目的对象。（官方例子）

然后我们以FileSystemFileEntry对象的形式得到了拖动的文件夹中的文件，再通过FileSystemFileEntry的file()方法拿到我们想要的file类型的对象（官方例子）。

文件的相对地址我们通过FileSystemFileEntry对象的fullpath属性得到。