如何从 HTML 输入类型“文件”或任何其他方式获取文件夹目录？

Posted 2023-02-22

【中文标题】如何从 HTML 输入类型“文件”或任何其他方式获取文件夹目录？

【英文标题】：How to get folder directory from HTML input type "file" or any other way?

【发布时间】：2012-10-08 04:33:51

【问题描述】：

所以我有一个"file" 类型的基本表单输入，但是我希望用户能够选择文件夹位置而不是文件。

如何获取此输入以选择文件夹而不是文件，或者有其他方法吗？

【问题讨论】：

为什么选择保存文件夹位置？

您是否要上传所选文件夹中的所有文件？

问题是，一旦你拿到了这个文件夹，你会怎么处理它？您要上传文件夹中的所有文件吗？或者对文件夹做其他事情？浏览器通常无法直接对文件夹执行任何操作，因此除非您计划将其上传内容，否则想要指定文件夹没有太多逻辑。

好的，所以基本上我有 php 脚本，它创建了一个包含位于文件夹中的所有图像文件的数组，我想为用户创建某种选择过程来选择脚本需要的文件夹继续运行。然后，PHP 脚本会创建一组图像文件并在一个网页上显示所有图像。现在听起来是个坏主意，但这样做是有道理的。

目录上传提案：wicg.github.io/directory-upload/proposal.html

【参考方案1】：

也偶然发现了这个页面，然后发现只用 javascript 就可以做到这一点（没有像 ActiveX 或 Flash 这样的插件）

基本上，他们添加了对文件输入元素“webkitdirectory”的新属性的支持。你可以这样使用它：

<input type="file" id="ctrl" webkitdirectory directory multiple/>

它允许您选择目录。对于支持多文件选择但不支持目录选择的浏览器，multiple 属性是一个很好的后备选择。

当您选择一个目录时，文件可通过控件的 dom 对象 (document.getElementById('ctrl')) 获得，就像它们具有多个属性一样。浏览器会递归地将所选目录中的所有文件添加到该列表中。

您也可以添加目录属性，以防它在某个时候标准化（找不到任何相关信息）

【讨论】：

请注意，这会阻止选择单个文件的可能性。迄今为止，使用“标准”方式（非 Flash、非 Silverlight 等）选择文件和目录的唯一方法是提供两个单独的输入元素。

@NikolayMelnikov 或使用拖放操作

如何让它接受多个东西，包括文件和文件夹？

我不会依赖这个，因为我在实时 HTML 规范 html.spec.whatwg.org/multipage/input.html#the-input-element 中没有看到这样的 directory 属性

看来主流桌面浏览器都支持了：caniuse.com/#feat=input-file-directory

【参考方案2】：

尽管这是一个老问题，但这可能会对某人有所帮助。

我们可以在使用“multiple”浏览文件时选择多个文件

<input type="file" name="datafile" size="40"  multiple> 

【讨论】：

与问题无关。

【参考方案3】：

您很可能正在考虑使用闪光灯/silverlight/activeX 控件。 <input type="file" /> 控件不处理这个问题。

如果您不介意用户选择文件作为获取其目录的一种方式，您可以绑定到该控件的 change 事件，然后剥离文件名部分并将路径保存在某处——但​​仅此而已尽其所能。

请记住，网页旨在与服务器交互。向远程服务器提供本地目录没有什么是“典型的”（服务器无法访问它，为什么要请求它？）；但是文件是一种选择性传递信息的方法。