.asasa {
position: relative;
width: 35px;
height: 35px;
border-radius: 50%;
float: left;
background: url("http://www.cdssfw.cn/static/walden/images/mbj.png") no-repeat;
background-size:100% 100%;
}
.asasa input {
position: absolute;
left: 0px;
top:0px;
width: 100%;
height: 100%;
opacity: 0;
}
<div class="asasa">
<input id="upimg" name="user_image" type="file" onchange="upLoad()" />
<span>切换头像</span>
</div>
function upLoad() {
var fileInput = document.getElementById("upimg");
var file = fileInput.files[0];
//创建读取文件的对象
var reader = new FileReader();
//创建文件读取相关的变量
//为文件读取成功设置事件
reader.onload = function(e) {
// alert('文件读取完成');
imgFile = e.target.result;
$(".asasa").css({
"background": 'url(' + imgFile + ') no-repeat',
"background-size": '100% 100%',
})
};
//正式读取文件
reader.readAsDataURL(file);
// var imgUrl = $('#upimg')[0].files[0];
}
js 上传图片
最新推荐文章于 2024-09-22 22:38:07 发布