在JavaScript中,我可以以编程方式为文件输入元素触发"click"事件吗？

Question

我想以<input type="file">编程方式在标记上触发click事件.

只是调用click()似乎没有做任何事情,或者至少它没有弹出文件选择对话框.

我一直在尝试使用侦听器捕获事件并重定向事件,但是我无法像点击某个人那样实际执行事件.

Answer 1

我一直在寻找解决方案.这些是我做出的结论:

1. 出于安全原因,Opera和Firefox不允许触发文件输入.
2. 唯一方便的选择是创建一个"隐藏"文件输入(使用不透明度,而不是"隐藏"或"显示:无"!),然后创建"下方"按钮.通过这种方式可以看到按钮,但在用户单击时,它实际上会激活文件输入.

希望这可以帮助!:)

<div style="display: block; width: 100px; height: 20px; overflow: hidden;">
<button style="width: 110px; height: 30px; position: relative; top: -5px; left: -5px;"><a href="javascript: void(0)">Upload File</a></button>
<input type="file" id="upload_input" name="upload" style="font-size: 50px; width: 120px; opacity: 0; filter:alpha(opacity=0);  position: relative; top: -40px;; left: -20px" />
</div>

Answer 2

你不能在所有的浏览器中做到这一点,据说IE 确实允许它,但Mozilla和Opera没有.

当您在GMail中撰写邮件时,"附加文件"功能以一种方式实现,适用于IE和支持此功能的任何浏览器,然后为Firefox和那些不支持的浏览器实现另一种方式.

我不知道为什么你不能这样做,但有一点是安全风险,并且你不允许在任何浏览器中做,有一点是在HTML File元素上以编程方式设置文件名.

Answer 3

您可以在任何浏览器上触发click(),但某些浏览器需要该元素可见且集中.这是一个jQuery示例:

$('#input_element').show();
$('#input_element').focus();
$('#input_element').click();
$('#input_element').hide();

它适用于之前的hide,click()但我不知道它是否有效而不调用show方法.从来没有在Opera上试过这个,我在IE/FF/Safari/Chrome上测试过它的确有效.我希望这将有所帮助.

Answer 4

这是可能的:在FF4 +,Opera？,Chrome:但是:

1. inputElement.click()应该从用户操作上下文调用!(不是脚本执行上下文)

2. <input type="file" />应该是可见的(inputElement.style.display !== 'none')(你可以隐藏它与可见性或其他东西,但不是"显示"属性)

Answer 5

对于那些了解你必须在链接上覆盖一个不可见形式但又懒得写的人,我为你写了.好吧,对我而言,不妨分享一下.欢迎评论.

HTML(某处):

<a id="fileLink" href="javascript:fileBrowse();" onmouseover="fileMove();">File Browse</a>

HTML(你不关心的地方):

<div id="uploadForm" style="filter:alpha(opacity=0); opacity: 0.0; width: 300px; cursor: pointer;">
    <form method="POST" enctype="multipart/form-data">
        <input type="file" name="file" />
    </form>
</div>

JavaScript的:

function pageY(el) {
    var ot = 0;
    while (el && el.offsetParent != el) {
        ot += el.offsetTop ? el.offsetTop : 0;
        el = el.offsetParent;
    }
    return ot;
}

function pageX(el) {
    var ol = 0;
    while (el && el.offsetParent != el) {
        ol += el.offsetLeft ? el.offsetLeft : 0;
        el = el.offsetParent;
    }
    return ol;
}

function fileMove() {
    if (navigator.appName == "Microsoft Internet Explorer") {
        return; // Don't need to do this in IE. 
    }
    var link = document.getElementById("fileLink");
    var form = document.getElementById("uploadForm");
    var x = pageX(link);
    var y = pageY(link);
    form.style.position = 'absolute';
    form.style.left = x + 'px';
    form.style.top = y + 'px';
}

function fileBrowse() {
    // This works in IE only. Doesn't do jack in FF. :( 
    var browseField = document.getElementById("uploadForm").file;
    browseField.click();
}

Answer 6

试试这个解决方案:http://code.google.com/p/upload-at-click/

Answer 7

如果您希望该click方法适用于Chrome,Firefox等,请将以下样式应用于输入文件.它将完全隐藏,就像你做的那样display: none;

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

就这么简单,我测试了它的工作原理!

Answer 8

只需使用标签标签，这样您就可以隐藏输入，并使其通过相关标签 https://developer.mozilla.org/fr/docs/Web/HTML/Element/Label

Answer 9

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

当我遇到类似问题时为我工作,这是一个常规的eRube Goldberg.