# 13.文件读取接口, 实现文件读取预览效果
# 效果
# 代码
<!-- 需求: 即时预览 -->
<form action="">
文件: <input type="file" name="myFile" id="myFile" onchange="getFileContent()"> <br>
<input type="submit"> <br>
<img src="" alt="">
</form>
<script>
function getFileContent(){
// 1.创建文件获取对象
var reader = new FileReader();
// 2.读取文件, 获取DataURL
var file = document.querySelector("#myFile").files;
reader.readAsDataURL(file[0]);
// 3.获取数据
reader.onload=function(){
// 显示
document.querySelector("img").src=reader.result;
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
- FileReader: 读取文件内容
- 1.readAsText():读取文本文件(可以使用Txt打开的文件), 返回文本字符串, 默认编码是UTF-8
- 2.readAsbinaryString(): 读取任意类型的文件, 返回二进制字符串
- 3.readAsDataURL(): 读取文件获取一段以data开头的字符串, 这段字符串的本质就是DataURL
- 4.abort(): 中断读取