工作之杂记---a标签隐藏input file 达到点击a标签即点击input file

最新推荐文章于 2022-04-03 17:40:40 发布

chen357313771

最新推荐文章于 2022-04-03 17:40:40 发布

阅读量2.9k

点赞数

分类专栏：工作+学习文章标签： css 图片上传 a inputfile

本文链接：https://blog.csdn.net/chen357313771/article/details/40583163

版权

工作+学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

由于浏览器不一，如IE8存在安全限制，代码触发input file 是不能获取的，只能用户行为触发input file的click，所以以a标签覆盖

<div id="uploadArea">
    <a id="upload" href="javascript:void(0);">
        上传图片
      <input id="imageFile" type="file" name="imageFile" οnchange="PathChanged();" />
    </a>
</div>

css

#uploadArea {
float: right;
width: 93px;
position: relative;
overflow: hidden;
}
 a {
height: 44px;
display: block;
background: url(../img/upload_btn.jpg) no-repeat left 15px;
padding-left: 20px;
line-height: 44px;
color: #29bfbc;
}
#imageFile {
position: absolute;
right: 0px;
top: 0px;
margin: 0px;
padding: 0px;
opacity: 0;
z-index: 1;
height: 100%;
width: 100%;
filter: alpha(opacity=0);
font-size: 100px;
}