我想通过编程方式在<input type="file">标记上生成一个点击事件。

仅仅调用click()似乎没有做任何事情,或者至少它不会弹出一个文件选择对话框。

我一直在尝试使用侦听器捕获事件并重定向事件,但我还不能像某人点击它那样实际执行事件。


当前回答

下面是这个问题的纯JavaScript解决方案。适用于所有浏览器

<script>
    function upload_image_init(){
        var elem = document.getElementById('file');
        if(elem && document.createEvent) {
           var evt = document.createEvent("MouseEvents");
           evt.initEvent("click", true, false);
           elem.dispatchEvent(evt);
        }
    }
</script>

其他回答

如果你想让click方法在Chrome、Firefox等浏览器上也能工作,请将下面的样式应用到输入文件中。它会被完全隐藏起来,就像你在做一个显示一样:没有;

#fileInput {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: -5000px;
}

就是这么简单,我测试过了!

希望这能帮助到一些人——我花了2个小时用头撞它:

在IE8或IE9中,如果你用javascript以任何方式触发打开一个文件输入(相信我,我都试过了),它不会让你用javascript提交表单,它会默默地失败。

通过常规的提交按钮提交表单可以工作,但调用form.submit();会默默失败。

我不得不使用一个透明的文件输入来覆盖我的选择文件按钮。

我正在研究这个不久前,因为我想创建一个自定义按钮,将打开文件对话框,并立即开始上传。我刚刚注意到一些可能使这成为可能的事情- firefox似乎打开对话框,当你点击上传的任何地方。所以下面的方法可以做到:

创建一个文件上传和一个单独的元素,其中包含您想要用作按钮的图像 安排它们重叠,并使文件元素背景和边框透明,这样按钮是唯一可见的东西 添加javascript使IE在点击按钮/文件输入时打开对话框 当选择文件时,使用onchange事件提交表单

这只是理论上的,因为我已经用了另一种方法来解决这个问题,但它可能会起作用。

以下是对我有用的解决方案: CSS:

#uploadtruefield {
    left: 225px;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 266px;
    opacity:0;
    -moz-opacity:0;
    filter:alpha(opacity:0);
    width: 270px;
    z-index: 2;
}

.uploadmask {
    background:url(../img/browse.gif) no-repeat 100% 50%;
}
#uploadmaskfield{
    width:132px;
}

HTML与“小”JQuery帮助:

<div class="uploadmask">
    <input id="uploadmaskfield" type="text" name="uploadmaskfield">
</div>
<input id="uploadtruefield"  type="file" onchange="$('#uploadmaskfield').val(this.value)" >

只是要确保maskfied被true upload字段完全覆盖。

$(document).one('mousemove', function() { $(element).trigger('click') } );

当我遇到类似的问题时,它为我工作,是一个普通的eRube Goldberg。