file解决IE8中文件上传报typeerror拒绝访问问题的解决方法

最新推荐文章于 2022-02-24 20:24:02 发布

iteye_4002

最新推荐文章于 2022-02-24 20:24:02 发布

阅读量830

点赞数

文章标签：前端 ViewUI

html中的file标签一直都是样式比较难处理的，这里提供一个方法，就是使用font-size和opacity来控制这样即解决了IE8+和firefox的兼容性，也不会报错（采用网上普遍的通过js方式激发file的click动作在IE8上会报错）

.uploadfileBtnWrapperDiv {
	BORDER-BOTTOM: 0px; POSITION: relative; BORDER-LEFT: 0px; WIDTH: 172px; BACKGROUND: url(../images/pageDesign/design_sprite_050712.png) no-repeat -695px 0px; HEIGHT: 36px; BORDER-TOP: 0px;CURSOR: pointer; BORDER-RIGHT: 0px; LEFT: 120px
}
.uploadfileBtn {
    opacity:0;filter:alpha(opacity=0);width:180px;Z-INDEX: 2; POSITION: relative; HEIGHT: 36px; TOP: 0px; CURSOR: pointer; LEFT: -10px;
}

<div class="uploadfileBtnWrapperDiv" >
            <input type="file" id="upload_img" class="uploadfileBtn" style="cursor: pointer;font-size: 2.3em;">
</div>

效果图如下：

主要如上标红的位置，设置了font-size撑大了file的button，opacity将透明度设置为0，就只显示图片