<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<style>
#showImage{
width: 50px;
height: 48px;
border-radius: 50%;
border: none;
margin-left: 20px;
}
</style>
</head>
<body>
<li>
<label>头像：</label>
<img id="showImage" src="https://avatar.csdn.net/3/5/4/1_q_qman.jpg" />
<label for="changeImage" style="padding: 4px 5px;margin: 5px 30px 0 0; background: #F24024; color: white; cursor: pointer;">上传</label>
<input type="file" name="image" id="changeImage" class="inputfile" style="width: 0;height: 0;opacity: 0;">
</li>
<script>
$("#changeImage").change(function(){
var r = new FileReader();
f = document.getElementById('changeImage').files[0];
r.readAsDataURL(f);
r.onload = function(e){
document.getElementById('showImage').src=this.result;
}
})
</script>
</body>
</html>样式可做优化
146
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
