html5实现文件夹上传

先插个背景：最近所在项目有个小需求，就是上传文件要可以同时选择文件夹及文件，然后把文件夹内得文件及所选单文件全部选择上传，借助于搜索关键词没搜到想要的结果（相关文章貌似很好，要么就是遍历文件夹内的文件之类的。。。），遂研究百度网盘文件上传功能。。。。。

发现百度网盘有个上就在input type=file 的标签上加个一个属性“webkitdirectory”，加上次属性即可选择整个文件夹。

 

 

查询属性“webkitdirectory”发现这并不是一个标准支持的属性，经测试，目前仅支持chrome浏览器，IE11/MOZ均不支持  safari暂未测试，谨慎使用。

MDN:关于次属性说明：

* Non-standard
* This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between * * * *implementations and the behavior may change in the future.

The HTMLInputElement.webkitdirectory is a property that reflects the webkitdirectory HTML attribute and indicates that the  element is used to create interactive controls for web-based forms in order to accept data from the user." href="https://www.#.com/link/aHR0cHM6Ly9kZXZlbG9wZXIubW96aWxsYS5vcmcvZW4tVVMvZG9jcy9XZWIvSFRNTC9FbGVtZW50L2lucHV0" rel="nofollow noopener" target="_blank"> element should let the user select directories instead of files. When a directory is selected, the directory and its entire hierarchy of contents are included in the set of selected items. The selected file system entries can be obtained using the  element of type file, but only if that selection was made using drag-and-drop: selecting a file in the dialog will leave the property empty (bug " href="https://www.#.com/link/aHR0cHM6Ly9kZXZlbG9wZXIubW96aWxsYS5vcmcvZW4tVVMvZG9jcy9XZWIvQVBJL0hUTUxJbnB1dEVsZW1lbnQvd2Via2l0RW50cmllcw==" rel="nofollow noopener" target="_blank">webkitEntries property.

 

对于目前要上传文件夹原生暂未完全支持，要寻求兼容各浏览器文件夹上传恐怕要多费写功夫。如有相关已经实现切体验良好的上传文件夹功能可以使用，请推荐，谢谢！

可以参考百度网盘网页版做法：支持此属性则显示上传文件夹选项，如果不支持次属性不显示上传文件夹选项