单图片上传
效果:
css样式:
<style>
.upload-invoice {
width: 375px;
height: 177px;
margin: 25px 0 50px;
background-image: url(../images/invoice.png);
background-repeat: no-repeat;
background-size: 100%;
}
.upload-invoice p {
height: 100%;
line-height: 177px;
text-align: center;
font-size: 30px;
background-color: #fff;
opacity: 0.7;
position: relative;
}
.upload-invoice p span {
font-size: 30px;
}
.upload-invoice img {
max-width: 100%;
max-height: 100%;
}
#file {
width: 100%;
height: 100%;
display: block;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
#img3 {
max-width: 375px;
max-height: 177px;
display: none;
margin: 25px 0 30px;
}
</style>
HTML:
<div class="invoice-wrapper">
<div class="upload-invoice ">
<p>
<input type="file" id="file" />
<span>+</span>选择发票
</p>
</div>
<img src="#" id="img3" />
</div>
js:
$(function() {
$("#file").change(function(e) {
e.preventDefault();
changepic();
});
})
// 上传图片预览
function changepic() {
$(" .upload-invoice ").css("display", "none");
var reads = new FileReader();
f = document.getElementById('file').files[0];
reads.readAsDataURL(f);
reads.onload = function(e) {
$("#img3").attr("src", this.result);
$(" #img3 ").css("display", "block");
};
}