方法一:
W3C处于安全性考虑,并没有为type为file的input空间指定onclick事件(IE不怎么按W3C标准办事儿)。
但是我们可以通过CSS技术来模拟这个功能,前提是你的浏览器支持半透明效果(opacity)
以下是给你的示例(Firefox, IE和Google Chrome下测试均通过):
-
HTML code
-
< style >
div.fileinputs {
position : relative ;
overflow : hidden ;
width : 70px ; /* this width should be changed */
}
div.fakefile {
position : absolute ;
top : 0px ;
left : 0px ;
z-index : 1 ;
}
input.file {
position : relative ;
text-align : right ;
left : -132px ; /* this width should be changed */
*left : -152px ; /* this width should be changed */
z-index : 2 ;
-moz-opacity : 0 ;
filter : alpha(opacity: 0) ;
opacity : 0 ;
}
</ style >
< div class ="fileinputs" >
< input type ="file" class ="file" />
< div class ="fakefile" >
< a href ="" onclick ="return false;" > Click Me </>
</ div >
</ div > -
-
方法二:
-
<script language="javascript">
function sDialog() {
var dataForm = document.forms['dataForm'];
dataForm.uploadFile.click();
}
</script>
<form name="dataForm" enctype="multipart/form-data">
<input name="uploadFile" type="file" style="display:none;">
<a href="javascript:void(sDialog());">选择文件</a>
</form> -
-
-