firefox下文件域的click事件不弹出文件对话框

Question

<script language="javascript">
function myclick(o){
if(typeof(o)=='string'){
var o = document.getElementById(o);
}else{
if(typeof(o)!='object') return;
}
if(document.all){
o.click();
}else{
var e = document.createEvent('MouseEvent');
e.initEvent('click',true,true);
o.dispatchEvent(e);
}
}
</script>
<input type="button" value="浏览" onclick="javascript:myclick('a')" />
<input type="file" id="a" style="display:none" onclick="javascript:alert('clicked');" />

在FF下面可以弹出"clicked"，但是不会出现文件对话框。
该怎么办？

Answer 1

这个机制有问题，毕竟在FF下那个click事件是模拟的，file的值通过模拟click事件获取的文件不能提交，也不能传给其他函数，因此就算你通过某种强力手法输入了file的指，也不见得能顺利提交

如果你实在想点击那个file，试试引入一下jquery，它已经帮你做了很多事情，你可以直接用.click()的方式来触发事件，兼容性jquery已经帮你做得很好了，不过我没有去尝试，即便是click成功也不保证可以正确提交表单

你可以尝试一下另外的思路，网上流传一种方法是模拟定位，然后让file透明来自定义file表单域的

<script>
function fclick(obj){
with(obj){
style.posTop=event.srcElement.offsetTop //设置透明上传框的Y坐标跟模拟按钮的Y坐标对齐
style.posLeft=event.x-offsetWidth/2 //设置透明上传框的X坐标为鼠标在X轴上的坐标加上它的宽的一半(确保点击时能点中透明上传框的按钮控件)，这里只是提供一种思路，其实还可以更精确的控制它的X坐标范围
}
}
</script>

或者精确X：
<script>
function fclick(obj){
with(obj){
style.posTop=event.srcElement.offsetTop //设置透明上传框的Y坐标跟模拟按钮的Y坐标对齐
var x=event.x-offsetWidth/2
if(x<event.srcElement.offsetLeft)x=event.srcElement.offsetLeft
if(x>event.srcElement.offsetLeft+event.srcElement.offsetWidth-offsetWidth)x=event.srcElement.offsetLeft+event.srcElement.offsetWidth-offsetWidth
style.posLeft=x }
}
</script>

file也要做隐藏处理
<input type="file" name="picpath" id="picpath" style="position:absolute;filter:alpha(opacity=0);width:30px;" onChange="document.formen.path.value=this.value" hidefocus=“hidefocus”>

大概原理就这样，调试兼容性是很麻烦的事情，不好意思我暂时没时间一步一步去验证，你按照这个思路再试试