可以把图片点击上传,也可以拖拽上传
代码:
<!DOCTYPE html>
<html>
<head>
<title>上传头像</title>
<meta charset="utf-8">
<style type="text/css">
*{margin: 0;
padding: 0;}
.container{
width: 50%;
margin: 0 auto;
height: 400px;
padding: 20px;
text-align: center;
}
.main{
width: 200px;
height: 200px;
border: 2px dashed #666;
margin: 20px auto;
position: relative;
}
.main input{
width: 100%;
height: 100%;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 11;
}
.main .btn{
width: 150px;
height: 150px;
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
<script type="text/javascript">
window.onload=function(){
var file=document.querySelector("#file");
var addImg =document.querySelector(".btn");
var main =document.querySelector(".main");
function upload(img){
var imgFile=new FileReader();
imgFile.readAsDataURL(img);
imgFile.onload =function(e){
addImg.src=e.target.result;
}
}
file.onchange=function(e){
var img =e.target.files[0];
upload(img);
}
main.ondragover=function(){
return false;
}
main.ondrop =function(e){
upload(e.dataTransfer.files[0]);
return false;
}
}
</script>
</head>
<body>
<div class="container">
<h1>拖动外部图片或单击上传图片</h1>
<div class="main">
<input type="file" name="file" id="file"/>
<img src="shirt_1.jpg" class="btn">
</div>
</div>
</body>
</html>