如何使用 JavaScript 读取文件
您可以使用 JavaScript File API 加载选定文件的内容。本节介绍 File API 的基本用法。
现在让我们看看如何使用 File API。
使用 JavaScript 读取文件概述
选择带有输入元素的文件
在 HTML 中,您可以通过将 input 元素的 type 属性设置为 file 来选择文件。
<input type="file">
如果您想允许多个文件选择多设置属性。
<input type="file" multiple>
用户选择文件后改变将发生一个事件。
处理输入元素的变化事件
要捕获更改事件,首先:改变有一种方法可以直接在其中编写处理程序。您可以通过将其传递给 onchange 处理程序来立即在处理程序中访问输入元素,如下所示:
<!DOCTYPE html>
<html lang="ja"><head><meta charset="utf-8" /><title>File Input Test</title><script>function fileChanged(input) {console.log(input);for (let i = 0; i < input.files.length; i++) {console.log(input.files[i]);}}</script></head><body><input type="file" onchange="fileChanged(this)" multiple/></body>
</html>
您还可以动态获取输入元素来处理更改事件。
<!DOCTYPE html>
<html lang="ja"><head><meta charset="utf-8" /><title>File Input Test</title><script>window.addEventListener('load', () => {const f = document.getElementById('file1');f.addEventListener('change', evt => {const input = evt.target;for (let i = 0; i < input.files.length; i++) {console.log(input.files[i]);}});});</script></head><body><input type="file" id="file1" multiple/></body>
</html>
在这种情况下,输入元素被传递给事件对象的目标属性。
从输入元素的 files 属性中获取一个 File 对象
当更改事件发生时,输入元素的 files 属性将传递一个 File 对象,该对象表示所选文件。
如果您显示文件选择屏幕一次并按下取消按钮而不选择文件,将调用更改事件处理程序,但文件属性将是一个长度为 0 的数组。
您可以将 File 对象保存在某处并稍后使用。
使用 FileReader 读取 File 对象
您可以使用 FileReader 对象来读取 File 对象的内容。通过将 File 对象传递给 FileReader 对象的读取文件的方法来开始读取。
读取文件的方法有以下几种。
- readAsText()
- readAsArrayBuffer()
- readAsBinaryString()
- readAsDataURL()
FileReader 对象读取 Blob 中的数据。File 对象也是一个 Blob,因为它是从 Blob 派生的。
当 FileReader 对象加载文件时,会调用 onload 事件。读取结果在 FileReader 对象的 result 属性中设置。
读取文本()读取后,字符串设置在结果中,readAsArrayBuffer()读取后,结果将设置为 ArrayBuffer 对象。
现在让我们看看如何实际读取文件。
读取文件示例
读取和显示所选文件的示例
在这里,我们将制作一个行为如下的示例。
选择文件后,将显示所选文件的内容。
显示在此操作检查中使用的 HTML 文件和样式表的内容。
HTML文件如下:请另存为file1.html。
<!DOCTYPE html>
<html lang="ja"><head><meta charset="utf-8" /><title>File API 1</title><script src="file1.js"></script><link href="style.css" rel="stylesheet" /></head><body><input type="file" id="file1" /><pre id="pre1"></pre></body>
</html>
输入元素的类型属性文件作为,作为一个ID文件 1已设置。
样式表样式.css如下。我只是稍微改变了字体并添加了背景颜色,但我没有做太多。
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap');html {font-family: 'Roboto', sans-serif;
}pre {font-family: 'Roboto mono', monospace;font-size: 0.9rem;background-color: #D6EAF8;padding: 10px;
}
JavaScript 文件file1.js如下。
window.addEventListener('load', () => {const f = document.getElementById('file1');f.addEventListener('change', evt => {let input = evt.target;if (input.files.length == 0) {console.log('No file selected');return;}const file = input.files[0];const reader = new FileReader();reader.onload = () => {const pre = document.getElementById('pre1');pre.innerHTML = reader.result;};reader.readAsText(file);});
});
在窗口对象的加载事件处理程序中,设置了该文件输入元素的更改事件处理程序。
当您进行文件选择操作时,这将调用更改事件处理程序。
一个 Event 对象被传递给事件处理程序。执行文件选择操作的输入元素被传递给事件对象的目标属性。这个输入元素文件该属性设置为选定文件对象的列表。
这次我们没有在 input 元素上设置 multiple 属性,所以只会设置一个 File 对象。
拿到File对象后,接下来就是读取文件的地方了。
const file = input.files[0];
const reader = new FileReader();
reader.onload = () => { const pre = document.getElementById('pre1');pre.innerHTML = reader.result;
};reader.readAsText(file);
这样,预文件的内容在元素中设置。
Promise 的事件处理和使用
好吧,在上面的代码中文件阅读器对象的 读取文本()在调用方法之前负载我已经设置了一个事件处理程序。
文件阅读器还有更多可用的事件,但每次设置它们然后调用它们可能有点复杂。
所以让我们使用 Promises 来组织我们的代码。
准备一个接收File对象的函数对象,如:
const readAsTextReader = file => {const reader = new FileReader();return new Promise((resolve, reject) => {reader.onloadstart = ev => {console.log(`onloadstart: total=${ev.loaded}/${ev.loaded}`);};reader.onloadend = ev => {console.log(`onloadend: total=${ev.loaded}/${ev.loaded}`);};reader.onprogress = ev => {console.log(`onprogress: total=${ev.loaded}/${ev.loaded}`);};reader.onerror = () => {reader.abort();reject('Unknown error occurred during reading the file');};reader.onload = () => {console.log('onload');resolve(reader.result);};reader.readAsText(file);});
};
这样,读取文件时的异步处理使用 Promise 的 then 和 catch,应用如下。
window.addEventListener('load', () => {const f = document.getElementById('file1');f.addEventListener('change', evt => {const input = evt.target;if (input.files.length == 0) {return;}const file = input.files[0];console.log(file);readAsTextReader(file).then(value => {const pre = document.getElementById('pre1');pre.innerHTML = value;}).catch(reason => {alert(reason);});});
});
简单的二进制文件查看器
接下来,让我们创建一个简单的二进制文件查看器作为示例,不仅可以读取文本文件,还可以读取二进制文件。
选择文件并使用 FileReader 读取文件的位置是相同的。
然而,这一次readAsArrayBuffer()读取文件。结果作为 ArrayBuffer 返回。
ArrayBuffer 是 JavaScript 中的字节字符串。有关详细信息,请参阅“使用 ArrayBuffer 处理二进制数据”。
const readAsArrayBufferReader = file => {const reader = new FileReader();return new Promise((resolve, reject) => {reader.onerror = () => {reader.abort();reject('Unknown error occurred during reading the file');};reader.onload = () => {console.log('onload');resolve(reader.result);};reader.readAsArrayBuffer(file);});
};window.addEventListener('load', () => {const f = document.getElementById('file1');f.addEventListener('change', evt => {const input = evt.target;if (input.files.length == 0) {return;}let file = input.files[0];console.log(file);if (!file) {return;}if (file.size > 50 * 1024) {alert('Please select a file smaller than 50kb.');return;}readAsArrayBufferReader(file).then(buff => {console.log(buff);let s = '';let a = new Uint8Array(buff);for (let i = 0; i * 16 < a.length; i++) {let line = '';let p = i * 16;let b = a.slice(p, Math.min(a.length, p + 16));for (const e of b) {let h = e.toString(16).toUpperCase().padStart(2, '0');line += ' ' + h;}let addr = p.toString(16).toUpperCase().padStart(8, '0');line = `${addr}:${line}\n`;s += line;}let pre = document.getElementById('pre1');pre.innerHTML = s;}).catch(reason => {alert(reason);});});
});
这次文件大小限制为 50KB。
从读取为 ArrayBuffer 的数据创建一个 Uint8Array 对象。从那里片()格式化为以 16 字节为增量显示。
到目前为止,我们已经介绍了如何在 JavaScript 中使用 File 对象和 FileReader 读取文件,如何使用 Promise 简化异步处理,以及处理二进制数据的示例。
如何使用 JavaScript 读取文件相关推荐
- 解决IE8上传文件时javascript取文件的本地路径的问题C:\fakepath\..
IE8上传文件时javascript读取文件的本地路径的问题("C:\fakepath\")的解决方案 前一阵把IE6升级到了IE8,没想到一个网站里面的上传图片时用JavaScr ...
- javascript读取xml文件读取节点数据的例子
分享下用javascript读取xml文件读取节点数据方法. 读取的节点数据,还有一种情况是读取节点属性数据. <head> <title></title> < ...
- cordova js(javascript)读取本地文件(将本地的bin文件转成字节数组)
此问题已经解决,解决方法参考我的博客: cordova本地存储(存取): 读取项目里的本地文件 文章目录 1.下面两个比较有用: 2.下面两篇博客证明不用input标签的情况下,无法获取本地文件(包括 ...
- 新手如何使用JavaScript读取json文件 v2.0
前言 3年前,我在纯小白时期写的一篇文章:新手如何使用JavaScript读取json文件 至今仍时常有小伙伴点击. 如今自己在此知识领域已经有所成长,故重写一篇更高质量,更有帮助的文章,希望更有效的 ...
- JavaScript读取本地json文件方式
JavaScript读取本地文件方式: 假如有本地文件:authors.json 内容为: [ {"name": "Kwan-Liu Ma","num ...
- html js引用本地资源,了解使用JavaScript读取本地文件的方法
本篇文章给大家介绍一下使用JavaScript读取本地文件的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 出于安全和隐私的原因,web应用程序不能直接访问用户设备上的文件.如 ...
- javascript ActiveXObject FileSystemObject 对象,创建、复制、删除、读取文件等
Javascript是网页制作中离不开的脚本语言,依靠它,一个网页的内容才生动活泼.富有朝气.但也许你还没有发现并应用它的一些更高级的功能吧?比如,对文件和文件夹进行读.写和删除,就象在VB.VC等高 ...
- Javascript ES6 Promise同步读取文件(使用async、await)
const fs=require('fs'); const path=require('path');const dirname='D:\\HBuilderX\\Workspace\\NodeJS\\ ...
- Javascript ES6 Promise异步链式读取文件解决回调地狱
const fs=require('fs'); const path=require('path');const dirname='D:\\HBuilderX\\Workspace\\NodeJS\\ ...
- php读取文件内容不全,php读取文件内容的三种方法
//**************第一种读取方式***************************** 代码如下: header("content-type:text/html;chars ...
最新文章
- UML作业第一次:UML用例图绘制
- 理解值和对象-快照图
- Kafka单机、集群模式安装详解(一)
- php十六进制字符串转成字节数组_10 天 5 千 Star!21 岁本科生给程序员开发的十六进制编辑器...
- 21. PE结构-PE各个结构的基本概念
- php开发简易论坛教程,[php] 我的微型论坛的简单教程[已完成]第3/8页
- 用vector实现二维向量
- android图片分辨率改变,android 通过修改图片像素实现CircleImageView
- spring是java ee框架吗,Java EE和Spring框架之间的区别
- vc6,vc.net,vc7,vc8,vc9,c,c++,c#的区别与联系
- 基于Multisim的555时基电路
- 全国计算机一级考试试题题库---附答案
- JAVA长方形正方形_正方形不是长方形的终极解决办法
- Layered Architecture 分层架构(完整翻译)
- python爬取英雄联盟所有皮肤_python爬取lol英雄皮肤
- [FPGA 日常记录] #4 32个 FPGA 开源网站
- 关于惠普系列电脑无法开机以及其他问题解决的总结
- 如何编写一个Java帮助文档
- IO系统的功能和层次模型
- C#中调用Flash按钮,点击按钮可打开相应的功能