input file获得文件根目录简单实现

首先，我们需要了解什么是input file。input file是HTML5新增的一种表单类型，用于让用户选择并上传本地文件。接着，我们来看一下如何使用input file实现文件根目录的简单获取。

1. HTML代码

首先，我们需要在HTML代码中添加一个input标签并设置type为file，这样就创建了一个文件选择框，代码如下：

<input type="file" id="input-file" onchange="getFileDirectory(this)">

1. JavaScript代码

接下来，我们需要编写JavaScript代码，在用户选择文件后，通过input file元素的属性获取文件的完整路径，然后提取根目录。代码如下：

function getFileDirectory(inputElement) {
  // 获取文件路径
  var filePath = inputElement.value;

  // 安全性检查，只允许选择本地文件
  if (filePath.indexOf("fakepath") !== -1) {
      filePath = filePath.substr(12); // 去掉“C:\fakepath\”前缀
  }

  // 提取根目录
  var rootDirectory = filePath.substr(0, filePath.indexOf("\\"));

  console.log(rootDirectory);
}

以上代码中，如果filePath包含了“fakepath”这个字符串，说明文件选择框中的路径是一个虚拟路径，需要去掉前缀“C:\fakepath\”才能获取真实的文件路径。接着通过substr方法提取根目录（假设该方法返回的是字符串“C:”），最后打印到控制台中。

1. 示例

下面给出两个示例，分别演示选择了同级目录和子目录中的文件时如何获取根目录。假设网站根目录下的structure目录中有两个文件：hello.txt和test\world.txt。在网页中添加一个input file元素，代码如下：

<input type="file" id="input-file" onchange="getFileDirectory(this)">

情况一：

• 用户选择hello.txt文件，此时getFileDirectory函数输出为“C:”。
• 用户选择world.txt文件，此时getFileDirectory函数输出为“C:”。

情况二：

• 用户选择test文件夹，getFileDirectory函数无输出。
• 用户选择test\world.txt文件，此时getFileDirectory函数输出为“C:”。

以上就是使用input file获取文件根目录的简单实现方法。