由于各浏览器的<input type="file">兼容性差异很大,在涉及多语言的项目中,浏览二字无法翻译,虽然有可能随着系统语言环境的不同而不同,但是论证一番还是觉得不靠谱,于是写个兼容的东东,方便使用,效果图及代码如下:
<!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实验室」的微信公众号二维码,欢迎扫描关注:
