如何允许用户在 <input type="file"> 标签中选择任何文件或目录？答案

【问题标题】：How to allow the user to pick any file or directory in an <input type="file"> tag?如何允许用户在 <input type="file"> 标签中选择任何文件或目录？
【发布时间】：2017-07-26 18:37:48
【问题描述】：

通过创建输入标签，例如：

<input type="file">

用户无法选择目录。通过启用某些标志：

<input type="file" webkitdirectory mozdirectory msdirectory odirectory directory multiple>

用户现在可以选择任何目录，但不能选择单个文件。

有什么办法可以同时启用吗？

【问题讨论】：

标签： javascript html

【解决方案1】：

目前这是不可能的。

mozilla 和 chrome 有几个请求开放，您可能想跟上它们。

【讨论】：

【解决方案2】：

您只能启用两者之一。

<input type="file" id="myFiles" webkitdirectory mozdirectory msdirectory odirectory directory multiple>

使用“标准”方式选择文件和目录的唯一方法是提供两个单独的 input 元素。

无论如何，当您选择一个目录时，文件可通过DOM object 使用document.getElementById('myFiles') 获得。

【讨论】：

【解决方案3】：

注意，在 Firefox 中，允许目录上传的属性是 allowdirs，而不是 mozdirectory。

当设置allowdirs属性时，firefox会渲染两个<input type="file">元素，一个用于文件上传，一个用于目录上传；铬没有。

一种解决方法是利用拖放来读取单个文件、多个文件、目录或多个目录。

另一种解决方法是包含两个<input type="file"> 元素；一个具有webkitdirectory，另一个具有multiple 属性集。

有关处理单个文件、多个文件、单个目录或多个目录上传的实现，请参见How to upload and list directories at firefox and chrome/chromium using change and drop events。

【讨论】：