本文介绍了HTML5中文件读取的过程，详细讲解了fileReader的使用，包括以二进制、DataURL和文本方式读取文件，以及fileReader提供的onload、onabort和onerror事件，帮助理解文件读取的操作和事件监听。
文件读取
完整的文件读取过程
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input id="m-file" type="file">
<script type="text/javascript">
// 1、获取元素
let fileInput=document.getElementById('m-file')
// 2、监听选中
fileInput.onchange=function(){
// 3、获取文件
let file=this.files[0]
// 4、创建读取器
let reader=new FileReader();
// 5、开始读取
reader.readAsText(file)
// 6、监听文件的读取状态
reader.onload=function(){
console.log(reader.result)
}
}
</script>
</body>
</html>
fileReader的常用方法
reader.readAsBinaryString(file)：文件读取为二进制
reader.readAsDataURL(file)：文件读取为DataURL
reader.readAsText(file)：文件读取为文本
fileReader提供的事件
1、reader.onload文件读取完成时触发，只在读取成功后触发
reader.onload=function(){
console.log(reader.result)
}
2、reader.onabort读取文件中断时触发
3、reader.onerror读取文件出错时触发
扫一扫
4533
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
