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

时间:2022-07-04 16:12:08

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

<div id="uploadArea">
    <a id="upload" href="javascript:void(0);">
        上传图片
      <input id="imageFile" type="file" name="imageFile" onchange="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;
}