惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

W
WeLiveSecurity
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
Hacker News - Newest:
Hacker News - Newest: "LLM"
Cloudbric
Cloudbric
V
Visual Studio Blog
L
LangChain Blog
A
About on SuperTechFans
B
Blog
T
Tenable Blog
罗磊的独立博客
Hacker News: Ask HN
Hacker News: Ask HN
Blog — PlanetScale
Blog — PlanetScale
博客园 - 三生石上(FineUI控件)
The Register - Security
The Register - Security
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
P
Palo Alto Networks Blog
U
Unit 42
WordPress大学
WordPress大学
D
Darknet – Hacking Tools, Hacker News & Cyber Security
N
News and Events Feed by Topic
T
Threat Research - Cisco Blogs
C
Check Point Blog
Security Latest
Security Latest
M
MIT News - Artificial intelligence
Application and Cybersecurity Blog
Application and Cybersecurity Blog
宝玉的分享
宝玉的分享
P
Proofpoint News Feed
NISL@THU
NISL@THU
Forbes - Security
Forbes - Security
S
Securelist
Security Archives - TechRepublic
Security Archives - TechRepublic
Hugging Face - Blog
Hugging Face - Blog
aimingoo的专栏
aimingoo的专栏
Latest news
Latest news
GbyAI
GbyAI
T
Troy Hunt's Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
L
LINUX DO - 热门话题
V2EX - 技术
V2EX - 技术
小众软件
小众软件
Google DeepMind News
Google DeepMind News
K
Kaspersky official blog
C
CXSECURITY Database RSS Feed - CXSecurity.com
O
OpenAI News
H
Hackread – Cybersecurity News, Data Breaches, AI and More
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
N
Netflix TechBlog - Medium
www.infosecurity-magazine.com
www.infosecurity-magazine.com
Google DeepMind News
Google DeepMind News
P
Proofpoint News Feed

开飞机的老张

AGENTS.md Openspec 使用心得 从树莓派内网穿透到 Cloudflare Pages Openclaw和博客 郊眠寺 采石 译:我为什么使用Map(和WeakMap)处理DOM节点 介绍JavaScript中Symbol 原生JavaScript获取URL参数 字符串首字母大写 用forEach()遍历对象 JavaScript禁用按钮 JavaScript的FormData JavaScript的Blob JavaScript的Thenable JavaScript中Promise的reject JavaScript的立即调用函数表达式(IIFE) JavaScript的Promise链 用interact.js实现拖拽、缩放、吸附
用FileReader读取本地文件
kaifeiji.cc · 2023-07-25 · via 开飞机的老张

原文:Read Local Files in JavaScript with FileReader

FileReader类可以从原生的文件input中读取文件。

JavaScript的FileReader可以在浏览器中读取用户机器上的文件。FileReader一般通过<input type="file">来读取数据。

例如,在页面上有一个id为select-file的文件input,可以用以下代码打印选中文件的内容。

1
2
3
4
5
6
7
8
9
const file = document.querySelector('#select-file').files[0];
const reader = new FileReader();

reader.onload = res => {
console.log(res.target.result);
};
reader.onerror = err => console.log(err);

reader.readAsText(file);

以下是一个实例,可以在每次选择不同文件时,在控制台输出文件的内容。在Linux/Windows中按Ctrl+Shift+J,或在OSX中按Cmd+J,打开Chrome的控制台,然后试试吧!

静态博客无法显示,请查看原文

FileReader在现代浏览器和IE10中支持良好。需要注意FileReader是浏览器的API,所以大部分浏览器支持,但FileReader并不是Node.js的一部分。

Promise和async/await
FileReader类的异步API在配合async/awaitPromise链使用时并不是很理想。以下代码将FileReader包裹在Promise中,可以用于链式操作:

1
2
3
4
5
6
7
8
9
10
11
12
function readFile(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();

reader.onload = res => {
resolve(res.target.result);
};
reader.onerror = err => reject(err);

reader.readAsText(file);
});
}

有了以上的readFile()帮助函数,可以在异步函数中读取文件:

1
2
3
4
5
async function onSubmit() {
const file = document.querySelector('#select-file').files[0];

const contents = await readFile(file);
}

本教程对您有帮助吗?来GitHub仓库点个星支持我们吧!