)触发,使用FileReader API实现: // H…">
当前位置:首页 > JavaScript

用js实现读写

2026-03-15 20:01:41JavaScript

文件读取(File Read)

在浏览器环境中,文件读取通常通过用户主动上传文件(如<input type="file">)触发,使用FileReader API实现:

用js实现读写

// HTML: <input type="file" id="fileInput">
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();

  // 读取为文本
  reader.readAsText(file);
  reader.onload = () => {
    console.log(reader.result); // 文件内容
  };
});

文件写入(File Write)

浏览器出于安全限制无法直接写入本地文件,但可通过以下方式模拟:

用js实现读写

  1. 下载文件:生成内容并触发下载
    
    function downloadFile(content, fileName) {
    const blob = new Blob([content], { type: 'text/plain' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = fileName;
    a.click();
    URL.revokeObjectURL(url);
    }

// 使用示例 downloadFile('Hello World', 'example.txt');


2. Node.js环境:使用`fs`模块
```javascript
const fs = require('fs');

// 同步写入
fs.writeFileSync('example.txt', 'Hello World');

// 异步写入
fs.writeFile('example.txt', 'Hello World', (err) => {
  if (err) throw err;
});

本地存储(Local Storage)

对于小型数据,可使用浏览器本地存储:

// 写入
localStorage.setItem('key', 'value');

// 读取
const value = localStorage.getItem('key');

// 删除
localStorage.removeItem('key');

注意事项

  • 浏览器环境无法直接访问文件系统,需用户交互触发。
  • Node.js中fs模块支持完整文件操作,但需处理路径权限问题。
  • 敏感数据避免使用localStorage,应考虑加密或服务端存储。

标签: js
分享给朋友:

相关文章

js 实现vue模板

js 实现vue模板

实现 Vue 模板的 JavaScript 方法 通过原生 JavaScript 可以实现类似 Vue 的模板渲染功能,主要包括数据绑定、指令处理和模板解析。以下是核心实现思路: 数据绑定与响应式…

js实现图片轮播

js实现图片轮播

实现基础图片轮播 使用HTML、CSS和JavaScript创建一个简单的图片轮播。HTML部分定义轮播容器和图片,CSS设置样式和动画效果,JavaScript处理轮播逻辑。 <div cl…

js实现pdf在线预览

js实现pdf在线预览

使用PDF.js实现PDF在线预览 PDF.js是由Mozilla开发的一个开源JavaScript库,可以在网页中直接渲染PDF文件。以下是实现PDF在线预览的步骤: 引入PDF.js库 在HT…

js分组实现

js分组实现

分组实现方法 在JavaScript中,可以通过多种方式实现数组或对象的分组操作。以下是几种常见的方法: 使用Array.prototype.reduce() 通过reduce方法可以轻松实现数组分…

链表实现js

链表实现js

链表的基本概念 链表是一种线性数据结构,由一系列节点组成,每个节点包含数据和一个指向下一个节点的指针(单向链表)或两个指针(双向链表)。与数组不同,链表在内存中非连续存储,插入和删除操作更高效,但随机…

js实现上传文件

js实现上传文件

文件上传的基本实现 使用HTML的<input type="file">元素配合JavaScript的File API可以实现文件上传功能。 <input type="file"…