如何在 JavaScript/AngularJS 中获取父文件夹名称？

2024-03-07 03:47:34

如何使用 JavaScript/AngularJS 获取父文件夹名称

获取父文件夹的挑战

在网页开发中，有时需要获取用户选择文件或目录的父文件夹名称。然而，HTML 输入文件元素无法直接获取目录路径名。本文将介绍使用 JavaScript 或 AngularJS 解决此问题的两种方法。

解决方案 1：JavaScript

使用 JavaScript，可以实现以下代码：

function folder_address() {
  const address = document.getElementById("folder_address");
  const folder = document.getElementById("folder");
  folder.value = address.files[0].webkitRelativePath; // 获取文件相对父文件夹的路径
}

HTML 代码：

<input type="file" id="folder_address" name="folder_address" webkitdirectory />
<input type="hidden" id="folder" name="folder" />

说明：
- folder_address 输入字段用于选择文件或目录。
- webkitdirectory 属性允许用户选择目录（仅适用于 WebKit 浏览器，如 Safari 和 Chrome）。
- folder 隐藏字段用于存储所选目录的相对路径。
- folder_address.files[0].webkitRelativePath 获取所选文件的相对父文件夹路径（仅适用于 WebKit 浏览器）。

解决方案 2：AngularJS

使用 AngularJS，可以实现以下代码：

angular.module('app', [])
.controller('ctrl', function($scope) {
  $scope.folder_address = function() {
    const address = document.getElementById("folder_address");
    const folder = document.getElementById("folder");
    folder.value = address.files[0].webkitRelativePath;
  }
});

HTML 代码：

<input type="file" id="folder_address" name="folder_address" ng-change="folder_address()" webkitdirectory />
<input type="hidden" id="folder" name="folder" />