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

iteye_4002

于 2012-12-27 12:55:00 发布

阅读量272

点赞数

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，就只显示图片