JS浏览文件

在Web开发中，有时我们需要让用户上传文件或者通过JS读取本地文件。本文将介绍如何通过JS浏览文件。

文件选择

我们可以使用<input type="file">标签来实现文件选择功能。

<input type="file" id="fileInput">

我们还可以通过JS监听文件的选择事件，获取选中的文件。可以在文件选择后调用一个函数，实现我们的业务逻辑。

const fileInput = document.getElementById('fileInput');

fileInput.addEventListener('change', (event) => {
  const selectedFile = event.target.files[0];
  // 处理选中文件
  console.log(selectedFile);
});

文件读取

我们可以使用FileReader对象来读取本地文件。

const reader = new FileReader();

reader.onload = (event) => {
  console.log(event.target.result);
};

reader.readAsText(selectedFile);

上面的代码将文件以文本形式读取并输出到控制台。

完整代码

下面是完整的代码示例：

<input type="file" id="fileInput">

<script>
  const fileInput = document.getElementById('fileInput');

  fileInput.addEventListener('change', (event) => {
    const selectedFile = event.target.files[0];

    const reader = new FileReader();

    reader.onload = (event) => {
      console.log(event.target.result);
    };

    reader.readAsText(selectedFile);
  });
</script>

参考链接

• FileReader - Web API 接口 | MDN