如何在 <input type="file"> 中设置默认目录、限制文件夹访问以及强制文件类型验证？

Question

我正在 Angular 项目中开发文件上传功能，用户可以使用 元素上传特定文件。

这些是该功能的 html 和 css 代码片段：

<label for="fileUpload" class="custom-file-upload">Load Parameters File</label>
<input type="file" id="fileUpload" style="display:none;" accept=".json,.xml">

.custom-file-upload {
  display: flex;
  cursor: pointer;
  background-color: #1c3849;
  color: white;
  border-radius: 6px;
  border: 1px solid black;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  font: 15px "Noto Sans Display", sans-serif;
  font-weight: normal;
  width: 200px;
  height: 50px;
  margin: 0;
}

.custom-file-upload:hover {
  background-color: #006e9e;
}

我希望单击“选择文件”时打开的文件资源管理器验证以下条件：

1. 设置默认目录：当提示用户上传文件时，我希望文件资源管理器在特定的默认位置打开。我找不到使用标准 HTML 或 TypeScript 为文件输入对话框设置默认文件夹的方法。
2. 限制文件资源管理器访问：我想限制用户在某些文件夹之外导航（例如，只允许他们浏览特定目录）。如果这是不可能的，至少我想确保用户在浏览时无法删除或重命名任何文件。
3. 强制文件类型限制：尽管在元素中使用accept属性来限制文件类型（例如json或xml文件），用户仍然可以在文件对话框中手动选择“所有文件”并上传其他类型的文件，如图所示在下面的截图中： 文件类型限制问题截图 我想完全阻止用户选择指定接受标准之外的文件。

期望的结果： 我正在寻找任何可以实现以下功能的解决方案（HTML、JavaScript 或其他）：

• 设置文件上传的默认目录。
• 限制文件夹导航或至少在浏览时禁用文件修改（删除/重命名）。
• 全面实施文件类型限制，用户在任何情况下都无法选择不支持的文件类型。 对于这些问题的任何指导或解决方案将不胜感激！

1. 对于默认目录和文件夹限制：我已经研究了文件系统访问API，但它似乎并不完全允许设置默认目录或以符合我的需求的方式限制用户访问。

2. 对于文件类型强制：虽然接受属性在一定程度上限制了文件类型，但用户仍然可以通过在文件选择器对话框中手动选择“所有文件”来绕过此限制。

Answer 1

什么是可能的？

看起来文件系统访问 API 将允许您更好地控制您想要的内容。

<input>

标签受到更多限制，因此我建议使用带有

onclick

事件的按钮或其他标签。

首先，您可以通过将

excludeAcceptAllOption

设置为 true 来禁用其他类型的文件。

其次，我们可以使用

startin

功能从给定目录开始。这可以是保存的目录或某种默认目录，例如大多数操作系统上都存在的“Home”。

对于最后一个要求，不幸的是，不可能限制用户导航到其他目录或重命名文件的能力，因为这是大多数/所有操作系统的默认功能。

对于

<input type='file'>

方法，这只具有here所述的少数属性。问题是这些属性都无法控制重命名或浏览，甚至无法查看您已单击但未决定选择哪些文件。 对于文件系统访问 API，也没有类似的内容，因为所有文件选择器选项都在 here 提供，并且与此无关。

阻止鼠标右键文件重命名或查看光标所在位置以阻止其移动到另一个目录等间接方法也行不通。这是因为在文件选择器中无法检测到鼠标移动、单击和所有其他用户输入。如果您创建用于键入或单击的事件侦听器，它将无响应，因为文件选择器不是元素，因此无法添加事件侦听器。

问题在于，无法控制文件重命名或用户进入的目录，因为程序员无法知道这些是否已经发生。由于没有内置选项，因此无法直接完成它们。

我该怎么办？

我知道这令人失望，但我唯一的建议是使用这两个可能的功能并以某种方式绕过另一个功能。对于您的元素，您可以将其更改为前面提到的按钮，并使用事件侦听器来激活文件选择器。

代码将如下所示：

const format = {
  excludeAcceptAllOption: true,
  multiple: false,
  startin: window.navigator.platform.indexOf("Win") != -1 ? "D:/" : "Users/",
  types: [{
    description: "Your description here",
    accept: {
      "text/*": [".json", ".xml"],
    },
  }, ]
};
async function filePicker() {
  var fileHandle = await window.showOpenFilePicker(format);
  return fileHandle;
}

function clickFunction() {
  window.showOpenFilePicker(format)
  var file = filePicker();

  // Do something with your file
}

.custom-file-upload {
  display: flex;
  cursor: pointer;
  background-color: #1c3849;
  color: white;
  border-radius: 6px;
  border: 1px solid black;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  font: 15px "Noto Sans Display", sans-serif;
  font-weight: normal;
  width: 200px;
  height: 50px;
  margin: 0;
}

.custom-file-upload:hover {
  background-color: #006e9e;
}

<label for="fileUpload" class="custom-file-upload">Load Parameters File</label>
<button id="fileUpload" style="display:none;" onclick="clickFunction()">

重要提示：这在浏览器代码片段中不起作用，因此您必须将其粘贴到文本编辑器中并在本地运行。