如何通过js打开选择文件对话框? [英] How to open select file dialog via js?

问题描述

$('#id').click();

在Mac OS上的Chrome 26上无法运行=(

It doesn't work on Chrome 26 on Mac OS =(

问题实际上是可以创建集成在表单中的上传"窗口小部件. 小部件将包括两个部分.第一部分是div，其中包含启动程序按钮和错误/成功消息. 我认为方法是将另一种形式作为文件输入的第二部分，然后将文件提交到iframe.提交后，我们以主要形式填写第一部分中的隐藏字段或以相同的方式显示错误.

The problem actually is creation "upload" widget that can be integrated in a form. Widget will consists of two parts. The first part is div with initiator button and error/success messages. I think the way is put another form as the second part with file input and submit file into the iframe. After submition we fill hidden field in first part in main form or show errors in the same.

简便的方法是将文件形式添加到主形式中，但是这是被禁止的.

Easy way is adding file-form into main-form, but it's prohibited.

修复我.

推荐答案

使用jQuery

我会像这样创建一个按钮和一个不可见的输入

Using jQuery

I would create a button and an invisible input like so

<button id="button">Open</button>
<input id="file-input" type="file" name="name" style="display: none;" />

并添加一些jQuery来触发它:

and add some jQuery to trigger it:

$('#button').on('click', function() {
    $('#file-input').trigger('click');
});

使用香草JS

相同的想法，没有jQuery(信用额度为@Pascale)

Using Vanilla JS

Same idea, without jQuery (credits to @Pascale)

<button onclick="document.getElementById('file-input').click();">Open</button>
<input id="file-input" type="file" name="name" style="display: none;" />

这篇关于如何通过js打开选择文件对话框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！