JavaScript本地文件操作

狼影 2025-10-17 00:00:00 次阅读

答案：通过File API和Blob可实现浏览器中本地文件读取与下载。用户需主动选择文件，利用FileReader读取内容，并通过创建Blob和a标签触发下载，支持拖拽导入，但无法静默访问文件，需注意安全与大文件处理。

JavaScript本身在浏览器环境中无法直接操作本地文件系统，这是出于安全限制。但通过现代Web API，可以在用户主动参与的前提下实现对本地文件的读取和处理。以下是几种常见且实用的方式。

使用File API读取本地文件

File API允许用户通过选择文件，然后使用FileReader读取内容。

操作步骤：

添加一个文件输入控件：
监听change事件获取选中的文件
用FileReader读取文件内容（文本或二进制）

示例代码：

document.getElementById('fileInput').addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (!file) return;

  const reader = new FileReader();
  reader.onload = function(event) {
    console.log("文件内容：", event.target.result);
  };
  reader.readAsText(file); // 读取为文本
  // reader.readAsArrayBuffer(file); // 读取为二进制
});

下载生成的文件到本地

虽然不能任意写入磁盘，但可以通过创建Blob并触发下载，让用户保存数据到本地。

常用方法：

将字符串或二进制数据封装成Blob
创建临时URL指向该Blob
用a标签模拟点击下载

示例：保存文本为文件

function downloadToFile(content, filename, mimeType) {
  const blob = new Blob([content], { type: mimeType });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
}
// 调用
downloadToFile("Hello, 本地文件！", "note.txt", "text/plain");