<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.upLoad-button {
width: auto;
position: relative;
overflow: hidden;
}
.btn-success {
background-color: #5bb75b;
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25)
}
.btn {
display: inline-block;
padding: 4px 12px;
font-size: 14px;
line-height: 20px;
text-align: center;
cursor: pointer;
border-radius: 4px;
}
.resetFile {
position: absolute;
right: 0px;
top: 0px;
font-family: Arial;
font-size: 14px;
margin: 0px;
padding: 0px;
cursor: pointer;
opacity: 0;
}
</style>
<body>
<!-- accept: 表示可以选择的文件MIME类型，多个MIME类型用英文逗号分开
multiple：是否可以选择多个文件，多个文件时其value值为第一个文件的虚拟路径。 -->
<div class="upLoad-button btn btn-success">
<span>上传头像</span>
<input type="file" class="resetFile" accept="image/png,image/gif" οnchange="handleFiles(event)">
</div>
<div><img id="selectImg"></div>
<script>
function handleFiles(event) {
//获取file对象
var file = event.target.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var dataUrl = e.target.result;
var ImageUrl = document.getElementById("selectImg");
ImageUrl.setAttribute('src', dataUrl)
}
reader.readAsDataURL(file);
}
</script>
</body>
</html>