FED实验室 - 专注WEB端开发和用户体验

兼容的File上传域

CSS(3) 煦涵 2504℃ 0评论

由于各浏览器的<input type="file">兼容性差异很大,在涉及多语言的项目中,浏览二字无法翻译,虽然有可能随着系统语言环境的不同而不同,但是论证一番还是觉得不靠谱,于是写个兼容的东东,方便使用,效果图及代码如下:

aa

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>File上传域兼容</title>
	<style type="text/css">
	body{margin:0;font:12px/1.5 arial,"simsun";}
	input:focus{outline:0;}
	input::-moz-focus-inner{border:0;padding:0;}
	.module_import{width:300px;margin:20px auto;}
	.tc{text-align:center;}.pr{position:relative;}.pa{position:absolute;}.poi{cursor:pointer;}
	.a_browse{width:140px;height:34px;line-height:34px;display:inline-block;background-color:#dedede;border:1px solid #ccc;border-radius:5px;box-shadow:0 1px 1px rgba(0,0,0,0.1);overflow:hidden;text-align:center}
	.a_browse:hover{background-color: #ccc;border:1px solid #bbb;}
	.input_file{width:142px;height:34px;left:-2px;top:0;font-size:100em; opacity:0;-moz-opacity:0;filter:alpha(opacity=0); }
	</style>
</head>
<body>
<div class="module_import tc">
	<form enctype="multipart/form-data" id="form_upload" method="post" >
		<p calss="module_import_p">
			<a class="a_browse pr poi tc">
				选择文件<input class="input_file pa poi" id="file_import" type="file" name="file">
			</a>
		</p>
	</form>
</div>	
</body>
</html>

设置font-size:100em;的原因是IE6-8的点击无效,一般点击按钮才能触发。

 

 

下面是「FED实验室」的微信公众号二维码,欢迎扫描关注:

FED实验室

行文不易,如有帮助,欢迎打赏!

赞赏支持or喜欢 (0)or分享 (0)
捐赠共勉
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址