<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="">
文件:<input name="myFile" id="myFile" type="file" onchange="getFileContent(); multiple" ><br>
<input type="submit">
</form>
<img src="" alt="">
<script>
function getFileContent(){
var reader=new FileReader();
var file=document.querySelector("#myFile").files;
reader.readAsDataURL(file[0]);
// console.log(reader.result);//读取结束后会把读取的结果存放在result中
// console.log(123);
reader.onloadend=function(){
document.querySelector("img").src=reader.result;
}
}
</script>
</body>
</html>
<!--
1.FileReader() :读取文件内容
0.onbort:读取文件短片时触发
1.onerror:读取错误时触发
2.onload:文件读取完成时触发
3.onloadend:读取完成触发无论失败还是成功
4.onloadstart:开始读取时触发
5.onprogress:读取过程中持续触发
2.readAsText():读取文本内容
3.readAsDataURL():读取文件获取一段data开头的字符串,这段字符串本质就是dataURL.dataURL是一种将文件嵌入到文档的方案;
4.readAsBinaryString():读取任意类型的文件,返回二进制字符串
5.abort();中断截取
6.onChange="";返回实时的信息
-->
