jquery 实现图片预览效果_jquery图片预览效果-优快云博客

使用jQuery和HTML实现图片预览效果，包括鼠标悬停时显示编辑按钮，点击后选择新图片并实时更新预览。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery 实现图片预览效果

发布时间：2018-02-26 11:27:33

CSS

.avatarWrapper:hover .avatarButton{
    display: block;
    cursor: pointer;
}
.avatarWrapper{
    position:relative;
    width: 250px;
    margin: 200px auto;
}
.avatarWrapper img{
	width: 250px;
	height: 250px;
}
.avatarButton{
    position:absolute;
    background-color:rgba(0, 0, 0, 0.5);
    top:230px;
    display: none;
    width: 250px;
    text-align: center;
}
.avatarButton span{
    
    color: #c5c2c2;
}

HTML

<div class="avatarWrapper">
	<img class="form-control" src="https://wx.qlogo.cn/mmopen/vi_32/PMxC3hj0bIzEKrNm15V9vcIAZhRtLiccI1p4HHicOjNHYo7iaYaBsI6AGfx9OiaPOSGRoIbIiajFUYF7xibibkbeyRSmQ/0" />
	<div id="avatarButton" class="avatarButton">
		<span>编辑图像</span>
	</div>
	<input type="file" name="avatar" id="editAvatar" accept="image/*" style="display:none;" />
</div>

Jquery

$('#avatarButton').on('click', function() {
    $('#editAvatar').click();
});

$('#editAvatar').on('change', function() {
    var reader = new FileReader();//创建一个文件读取对象
    reader.onload = function(e) {//图像读取完成后显示图像
        $('.avatarWrapper img').attr('src', e.target.result);
    }
    reader.readAsDataURL($(this).get(0).files[0]);//读取图像文件
});