在Web端使用JavaScript读取文件目录是受限制的，因为出于安全考虑，Web浏览器不允许JavaScript直接访问文件系统。但是，可以通过用户的交互操作来读取文件目录。

以下是使用HTML5的File API读取用户选择的单个文件的目录的例子：

<input type="file" id="fileInput" webkitdirectory directory multiple/>
<script>
  const fileInput = document.getElementById('fileInput');
  fileInput.addEventListener('change', function(event) {
    const files = event.target.files;
    for (let i = 0; i < files.length; i++) {
      console.log(files[i].webkitRelativePath); // 文件相对路径
    }
  });
</script>

在这个例子中，用户可以选择一个目录，然后通过webkitRelativePath属性获取文件的相对路径。这个属性显示了文件相对于选择的目录的路径。

请注意，这种方法不会显示文件夹内的所有文件，只有当用户选择了文件夹时，才会显示文件的路径。此外，这种方法不适用于服务器上的文件系统，只适用于用户的本地文件系统。