2.25

JavaScript 获取上传文件的本地绝对路径

在Web开发中，我们经常需要处理用户上传的文件。但是，出于安全考虑，现代浏览器不允许JavaScript直接获取文件的本地绝对路径。本文将介绍一种方法，通过创建一个可下载的链接来间接获取文件的本地绝对路径。

为什么需要获取文件的本地绝对路径？

  1. 文件管理：在某些情况下，我们需要对上传的文件进行本地管理，例如备份、分类等。
  2. 文件分享：有时我们需要将文件分享给其他用户，而直接提供文件的本地路径可以方便用户访问。
  3. 离线访问：在没有网络的情况下，用户可能需要访问这些文件。

如何获取文件的本地绝对路径？

由于浏览器的安全限制，我们不能直接获取文件的本地绝对路径。但是，我们可以通过以下步骤间接获取：

  1. 创建一个<a>标签，设置其href属性为文件的URL。
  2. 设置<a>标签的download属性，以便浏览器将其识别为可下载的文件。
  3. 触发<a>标签的点击事件，浏览器将自动下载文件。
  4. 使用浏览器的下载管理器，查看文件的保存路径。

 

    1. <!DOCTYPE html
    2. <html lang="en">
    3.  
      <head>
    4.  
      <meta charset="UTF-8">
    5.  
      <title>获取文件的本地绝对路径</title>
    6.  
      </head>
    7.  
      <body>
    8.  
      <input type="file" id="fileInput" />
    9.  
      <button onclick="downloadFile()">下载文件</button>
    10.  
       
    11.  
      <script>
    12.  
      function downloadFile() {
    13.  
      const fileInput = document.getElementById('fileInput');
    14.  
      const file = fileInput.files[0];
    15.  
      const url = URL.createObjectURL(file);
    16.  
       
    17.  
      const a = document.createElement('a');
    18.  
      a.href = url;
    19.  
      a.download = file.name;
    20.  
      document.body.appendChild(a);
    21.  
      a.click();
    22.  
      a.remove();
    23.  
      }
    24.  
      </script>
    25.  
      </body>
    26.  
posted @ 2025-02-25 22:27  晨观夕  阅读(24)  评论(0)    收藏  举报