js实现本地文件的加载与读取

最新推荐文章于 2024-11-06 18:05:13 发布

原创最新推荐文章于 2024-11-06 18:05:13 发布 · 4.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#js #文件 #加载 #读取

Javascript 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用HTML的<input>标签加载本地文件，并通过FileReader读取文件内容，支持文本、ArrayBuffer等多种格式。

加载本地文件

要加载本地文件，需要使用<input>标签：

<input type="file" id="file" multiple>

如上：

type: 必须为file。
multiple: 用于同时加载多个文件。

这样就会生成一个选择文件按钮，其右侧显示未选择任何文件。
select
点击选择文件，即可弹出一个文件选择窗口。
同时该元素还接收拖放，拖动多个文件到选择文件即可。
在<input>外添加一个<div>，该组件同样会支持拖放，其行为就像是<input>的一部分。
选择文件后，会触发<input>的change事件：

var files = []
window.onload = function(e) {
	var f = document.getElementById("file")
	f.onchange = function() {
		files = this.files
	}
}

如上，为<input>注册change事件，当有文件拖放到<input>上时，该事件会触发并接收到拖放的文件内容。
由于支持多文件，故而接收到的文件是一个数组，每个元素都是一个文件。

读取文件内容

当拿到文件后，要使用FileReader来读取文件的内容：

var loadCount = 0 // 已读取文件数量
// 读取单个文件
var loadAFile = function(file) {
	var reader = new FileReader()
	reader.onload = function(e) {
		var r = this.result		
		loadCount++
		if (loadCount == files.length) {
			console.log('读取完毕')
		}
	}
	reader.readAsText(file, 'GB2312') // 以文本形式读取
}
for (var i = 0; i < files.length; i++) {
	loadAFile(files[i])
}

如上：

使用FileReader.readAsText()来以文本形式读取文件，其第二个参数可传入编码。除了文本形式，还可以ArrayBuffer/BinaryString/DataURL形式读取。具体可参考文档。
FileReader.readAsText()会触发FileReader的onload事件，但这是异步的。故而上面使用for来读取所有文件时，很可能for循环已经结束了，第0个文件的onload才刚触发。因此上面对读取单个文件封装了函数，这样会隔离作用域。使用一个单独的变量loadCount来记录已读取文件数量，从而可判断是否所有文件都读取完毕。