js如何获取file控件的完整路径具体实现代码

获取 file 控件的完整路径在 Web 开发中很常见，这里提供几种常用的实现方式。

使用 FileReader

FileReader 是一种用于读取文件数据的 Web API 接口，如果需要获取文件的完整路径，可以使用 FileReader 读取文件的 URI。以下代码演示了如何使用 FileReader 获取 file 控件的完整路径：

const fileInput = document.getElementById('file-input');

fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();
  reader.onload = function() {
    console.log(reader.result);
  };
  reader.readAsDataURL(file);
});

在上面的代码中，首先获取 file 控件（这里假设其 id 为 file-input），然后监听 change 事件，当文件输入框的值发生变化时，我们读取 file 对象并使用 FileReader 读取其数据，最终将读取到的 URI 输出到控制台。

使用 URL.createObjectURL

另一种获取 file 控件的完整路径的方式是使用 URL.createObjectURL，这个 API 可以创建 Blob URL，只需要通过 createObjectURL 函数传入 file 对象即可创建一个这样的 URL。以下代码演示了如何使用 URL.createObjectURL 获取 file 控件的完整路径：

const fileInput = document.getElementById('file-input');

fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const url = URL.createObjectURL(file);
  console.log(url);
});

在上面的代码中，首先获取 file 控件，然后监听 change 事件，当文件输入框的值发生变化时，我们获取 file 对象并使用 URL.createObjectURL 创建 Blob URL，最终将创建出来的 Blob URL 输出到控制台。

以上是两种常见的获取 file 控件完整路径的方法，需要注意的是，file 对象中存储的是文件的数据而非路径，获取的字符串都是由浏览器生成的 URL。