实现图片预览

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();

});