实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上传照片</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<style>
.photo{width: 300px;height: 300px;border-radius: 50%;border:1px solid #ccc;margin: 0 auto;margin-top: 100px;position: relative;overflow: hidden;}
.photo:hover{background: #fff266;border:0 solid #fff;}
#file{position: absolute;width: 100%;height: 100%;opacity: 0;z-index: 999;cursor: pointer;}
.photo p{line-height: 250px;color: #666;font-size: 28px;position: absolute;z-index: 99;left: 80px;}
#img{width:310;height: 310px;}
</style>
<body>
<div class="photo">
<p>拍照或上传</p>
<input type="file" accept="" id="file">
<img src="" id="img" alt="">
</div>
</body>
<script>
$("#file").change(function(e){
var files=e.target.files[0];
if(!/image\/\w+/.test(files.type)){
alert("请上传图片");
return;
}
var reader=new FileReader();
reader.readAsDataURL(files);
reader.onload=function(){
var url=this.result;
$("#img").attr('src',url);
$(".photo>p").html(' ');
}
console.log(e.target.files[0])
})
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
