javascript 对文件操作

原创

mob64ca12cfa7d5 2023-08-08 14:37:26 ©著作权

文章标签 读取文件回调函数文件操作 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12cfa7d5的原创作品，请联系作者获取转载授权，否则将追究法律责任

JavaScript 对文件操作

JavaScript 是一种广泛应用于 Web 开发的脚本语言，它提供了丰富的文件操作功能，可以用于读取、写入、删除和修改文件。在本文中，我们将介绍 JavaScript 中常用的文件操作方法，并提供一些代码示例来帮助读者更好地理解。

读取文件

在 JavaScript 中，我们可以使用 FileReader 对象来读取文件内容。FileReader 提供了 readAsText() 方法，用于将文件内容以文本形式读取出来。

以下是一个读取文本文件的示例代码：

// 创建 FileReader 对象
const reader = new FileReader();

// 选择文件
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];

// 读取文件内容
reader.readAsText(file);

// 文件读取完成时的回调函数
reader.onload = function(event) {
  const content = event.target.result;
  console.log(content);
};

在上面的示例中，我们首先创建了一个 FileReader 对象，并通过 readAsText() 方法将选中的文件以文本形式读取出来。然后，我们可以通过 onload 事件监听文件读取完成的回调函数，并在回调函数中获取文件内容。

写入文件

JavaScript 提供了 Blob 和 File 对象，可以用于创建并将内容写入文件。

以下是一个将文本内容写入文件的示例代码：

// 创建 Blob 对象
const content = 'Hello, World!';
const blob = new Blob([content], { type: 'text/plain' });

// 创建下载链接
const downloadLink = document.createElement('a');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'example.txt';
downloadLink.click();

在上面的示例中，我们首先创建了一个 Blob 对象，将要写入文件的内容传入其中。然后，我们通过 URL.createObjectURL() 方法创建一个下载链接，并设置 download 属性指定文件名。最后，我们使用 click() 方法触发下载链接，将文件保存到本地。

删除文件

JavaScript 中并没有直接删除文件的 API，但我们可以通过 URL.revokeObjectURL() 方法来删除通过 URL.createObjectURL() 创建的下载链接。

以下是一个删除文件的示例代码：

// 创建下载链接
const downloadLink = document.createElement('a');
downloadLink.href = 'example.txt';
downloadLink.download = 'example.txt';

// 删除下载链接
URL.revokeObjectURL(downloadLink.href);

在上面的示例中，我们首先创建了一个下载链接，并设置 href 属性指定文件地址和 download 属性指定文件名。然后，我们通过 URL.revokeObjectURL() 方法删除下载链接，实现间接删除文件的效果。

修改文件

要修改文件内容，我们首先需要先读取文件内容，然后对内容进行修改，并将修改后的内容写入新的文件。

以下是一个修改文件内容的示例代码：

// 创建 FileReader 对象
const reader = new FileReader();

// 选择文件
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];

// 读取文件内容
reader.readAsText(file);

// 文件读取完成时的回调函数
reader.onload = function(event) {
  const content = event.target.result;
  const modifiedContent = content.replace('Hello', 'Hi');

  // 创建 Blob 对象
  const blob = new Blob([modifiedContent], { type: 'text/plain' });

  // 创建下载链接
  const downloadLink = document.createElement('a');
  downloadLink.href = URL.createObjectURL(blob);
  downloadLink.download = 'modified.txt';
  downloadLink.click();
};

在上面的示例中，我们首先通过 FileReader 对象读取文件内容，并在读取完成的回调函数中对内容进行修改。然后，我们创建一个新的 Blob 对象，将修改后的内容传入其中。最后，我们使用 URL.createObjectURL() 方法创建一个下载链接，并触发下载链接以保存修改后的文件。