<!DOCTYPE html>
<html>
<head lang="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>
转载请注明原文地址: https://www.6miu.com/read-83208.html
