FileReader读取完文件后,会将结果存储在result属性中,而不是直接返回。
FileReader提供的读取文件的方法
- readAsBinaryString
将文件读取为二进制编码 - readAsText
将文件读取为文本 - readAsDataURL
将文件读取为DataURL
FileReader提供的事件
- onabort
读取文件中断时触发 - onerror
读取文件出错时触发 - onload
读取文件完成时触发,只在读取成功后触发 - onloadend
读取文件完成时触发,无论读取成功或失败都会触发 - onloadstart
读取文件开始时触发 - onprogress
正在读取文件
读取文件示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>read file</title>
</head>
<body>
<input type="file" name="">
<script type="text/javascript">
var input = document.querySelector("input");
input.onchange = function() {
// 获取到文件
var file = this.files[0];
// 创建读取器
var reader = new FileReader();
// 开始读取
reader.readAsText(file);
// 文件读取完成后,获取读取的结果
reader.onload = function() {
console.log(reader.result);
}
}
</script>
</body>
</html>
网友评论