一真的小站

鳶飛魚躍,無處不是化境。

0%

八、即时预览图片

八、即时预览图片

写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<body>
<form action="">
<Input type="file" name="myFile" id="myFile" onchange="getFileContent();"><br>
<Input type="submit">
</form>
<img src="" alt="">
<script>
function getFileContent() {
// console.log(123);
var reader = new FileReader();
var file = document.querySelector("#myFile").files;
// // reader.readAsDataURL();
// reader.readAsDataURL(file[0]);
// console.log(reader.result);//没读完
reader.onload = function() {
console.log(reader.result);
document.querySelector("img").src = reader.result;
}
}
</script>
</body>

参数含义

对象 定义
reader 创建文件读取对象
readAsDataURL 没有返回值:void;需要传递一个参数(图片及嵌入到文档的文件);将读取的结果存储在读取对象的result中
files 储存在file的数组值
FileReader事件模型 定义
onabort 读取文件中断片时触发
onerror 读取文件错误时触发
onload 读取文件完成时触发
onloadend 读取文件完成时触发,不论是否成功
onloadstart 开始读取时触发
onprogress 读取文件过程中持续触发