首先,把input标签和img标签放在div中。定义三个class属性。
<div class="file-view">
<input class="view-file" type="file" name="img">
<img class="view-img" src="../default-image.png">
</div>
接着,给三个class属性添加css属性即可。
<head>
<style>
.file-view {
height: 80px;
width: 80px;
padding: 2px;
border: 1px dotted #dddddd;
position: relative;
}
.file-view .view-file {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
z-index: 1001
}
.file-view .view-img {
height: 100%;
width: 100%;
border: 0;
overflow: hidden;
}
</style>
</head>
展示效果,没有添加style样式时,
添加了style样式后,