<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#preview{
width: 400px;
height: 360px;
border: solid 1px rgba(0,0,0,.1);
border-radius: 5px;
}
</style>
</head>
<body>
<input type="file" name="" οnchange="handleSelected()">
<img id="preview" src="" width="100%" height="100%"/>
<script type="text/javascript">
function handleSelected(){
/**得到FileList的第一个元素，也就是上传的图片**/
var e = window.event || arguments[0];
let file = e.target.files[0];
console.log(file)
/**创建一个FileReader实例，用来读取文件**/
let reader = new FileReader();
/**成功读取之后将图片显示出来**/
reader.onload = function(e){
let image = document.getElementById('preview');
image.src = e.target.result;
image.onload = function (){
console.log(e.target.result)
console.log('图片加载出来了...')
}
}
reader.readAsDataURL(file);
}
</script>
</body>
</html>
运行截图：
636
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
