我想通过编程方式在<input type="file">标记上生成一个点击事件。
仅仅调用click()似乎没有做任何事情,或者至少它不会弹出一个文件选择对话框。
我一直在尝试使用侦听器捕获事件并重定向事件,但我还不能像某人点击它那样实际执行事件。
我想通过编程方式在<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。