js实现本地文件读取和写入并获取本地文件路径

在浏览器端，JavaScript无法直接访问用户的本地文件系统。但是，可以通过input元素的file类型实现选择本地文件，并使用FileReader API读取文件内容，使用Blob、File和XMLHttpRequest对象实现向服务器上传文件。

以下是一个利用input元素的file类型和FileReader API读取本地文件的示例代码：

<input type="file" id="fileInput">
<script>
  const fileInput = document.getElementById('fileInput');
  fileInput.addEventListener('change', (event) => {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.onload = (event) => {
      const fileContent = event.target.result;
      console.log(fileContent);
      // 在这里可以将文件内容写入到本地存储或发送到服务器
    };
    reader.readAsText(file);
  });
</script>

对于本地文件的写入，可以使用HTML5提供的文件系统API（Filesystem API）来实现。该API允许Web应用程序在用户的本地文件系统上创建、读取、写入和删除文件和目录。

以下是一个使用Filesystem API在本地文件系统上创建和写入文件的示例代码：

<button id="writeBtn">写入文件</button>
<script>
  const writeBtn = document.getElementById('writeBtn');
  writeBtn.addEventListener('click', async () => {
    // 请求用户授权访问文件系统
    const granted = await window.showDirectoryPicker();
    if (granted) {
      // 创建或打开文件
      const fileHandle = await granted.getFileHandle('test.txt', { create: true });
      // 将数据写入文件
      const writable = await fileHandle.createWritable();
      await writable.write('Hello, world!');
      await writable.close();
      // 获取文件路径
      const file = await fileHandle.getFile();
      const path = file.webkitRelativePath;
      console.log(`文件路径：${path}`);
    }
  });
</script>

需要注意的是，Filesystem API目前只在Chrome和Edge浏览器中得到实现，而且只有在HTTPS环境下才能使用。