在实际的开发中,经常会有文件读取的需求,本文主要复习如何使用HTML5提供的API来解决文件读取的问题
- 1.在遇到一些小的文件的读取的时候,我们是可以使用H5提供API来实现文件的读取的,代码示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="file">
<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>
总结
1. 使用标签<input type="file"/>
2. 获取上传的文件
3. 创建读取器对象:var reader=new FileReader();
4. 开始读取文件: reader.readAsText(file); // 参数是获取的文件
5. 读取文件的结果:console.log(reader.result);这里需要注意的是,在文件的内容被读取后,才可以获取文件的内容,所以读取文件的内容要放在读取文件之后;
reader.onload=function() {
// 这里打印的是文件中的内容
console.log(reader.result);
}
```
来源：CSDN
作者：my_love_download
链接：https://blog.csdn.net/my_love_download/article/details/102911922