css前沿图片预览,实现图片预览

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:

选择图片

js:

$('#bigPicImg').change(function() {

$("#bigPic").attr("src", URL.createObjectURL($(this)[0].files[0]));

// $('#bigPic').next().hide();

});