input框图片预览
效果
地址
http://www.oujin.fun/webPage/staticPage/img_input/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
</script>
<style type="text/css">
html,body{
height: 100%;width: 100%
}
.content{
height: 100%;
width: 100%;
}
.boxStyle4{
height: 50%;
width: 50%;
border: 1px cadetblue dashed;
top:25%;
left: 25%;
position: absolute;
}
.mButton1{
width: 80px;
height: 35px;
border-radius: 5px;
border: none;
outline: none;
background-color: #409EFF;
color: #fefefe;
}
</style>
</head>
<body>
<div class="content">
<div class="boxStyle4">
<img id="img">
<input id="upload" onchange="upload(this)" style="display: none" type="file" accept="image/*">
<!-- <input onchange="inputTest(this)">-->
<button id="uploadButton" class="mButton1" onclick="test(this)">upload</button>
</div>
</div>
</body>
<script type="text/javascript">
/* document.addEventListener("click",function(e){
console.log(e.target)
})*/
/*function inputTest(e){
console.log(event)
console.log(arguments)
console.log(e)
}*/
function upload(e){
//this,event,arguments的区别,event.target与arguments[0]都是指向this的
console.log(arguments[0]===e)
console.log(event.target===e)
console.log(arguments.file)
//新建FileReader对象
//FileReader.readAsDataURL()开始读取指定的Blob中的内容。一旦完成,
// result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容。
const read= new FileReader();
read.readAsDataURL(event.target.files[0])
//上传完成调用
read.onload=(s)=>{
// console.log(s)
// console.log(s.target.result)
//将生成的二进制文件赋值到指定的img
document.getElementById("img").src=s.target.result
}
}
function test(e){
document.getElementById("upload").click()
}
</script>
</html>