百度了一下大佬的,然后再根据自己的情况改成我想要的,在此记录。
- 我的上传按钮
<span class="file"><i
class="fa fa-picture-o fa-lg" aria-hidden="true"></i>
<input type="file" name="" onchange="showPreview(this)">
</span>
- 按钮的css样式
.file {
position: relative;
text-decoration: none;
text-indent: 0;
line-height: 20px;
float: left;
width: 23px;
height: 18px;
margin-left: 10px;
}
.file input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
width: 23px;
height: 18px;
margin-left: 10px;
}
.file:hover {
text-decoration: none;
}
- 最后成果
那个表情不是,是第二个图片那个,点击图片就可以选择电脑的图片,还可以在下面可编辑的div显示。如果需要在可编辑的div显示图片的写法,可看看我上篇文章。