css：
.bigPic {
width: 400px;
height: 300px;
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 10px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
}
.bigPic img {
position: absolute;
left: 0;
top: 0;
z-index: 0;
width: 100%;
height: 300px;
}
.btn-primary {
color: #fff;
background-color: #fa6361;
outline: 0;
}
.bigPic a,input{
? width:100px;
? height:35px;
? text-align: center;
? line-height: 35px;
position: absolute;
top: 132px;
left:150px
z-index: 2;
}
a{ text-decoration:none}
html:
<div class="bigPic">
? ? <img src="" id="bigPic" alt="">
? ? <a href="javascript:;" class="btn btn-primary" style="">選擇圖片</a>
? ? <input type="file" style="width: 100px;opacity: 0;" id="bigPicImg" accept="image/*" name="bigPic">
</div>
js:
$('#bigPicImg').change(function() {
? ? $("#bigPic").attr("src", URL.createObjectURL($(this)[0].files[0]));
? ? // $('#bigPic').next().hide();
});
