<!DOCTYPE html>
<html>
<head en">
<meta charset="UTF-8">
<title></title>
<style>
.info{
width: 500px;
min-height: 200px;
border: 1px solid red;
margin-top:30px;
text-shadow: 4px 3px 1px #333;
}
</style>
</head>
<body>
请选择图片文件：<input type="file" multiple />
<div class="info">
<img src="" alt=""/>
</div>
<script>
var input=document.querySelector('input');
input.onchange=function(){
//拿到用户选择的第一个文件
var file=input.files[0];
// 读取文件 FileReader对象
var fr=new FileReader();
//以url的形式读取文件
fr.readAsDataURL(file);
//当文件读取完成后，显示读取的结果
fr.onload=function(){
console.log(fr.result);
//显示
document.querySelector('img').src=fr.result;
}
}
</script>
</body>
</html>
![主流浏览器四大综合性能测试[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)