如何通过js打开选择文件对话框？

问题描述

  $（＃ID）点击（）; 
  

无法在Mac OS上使用Chrome 26 =（

）

问题实际上是创建上传小部件，可以集成到一个表单中
小部件将由两部分组成：第一部分是带启动器按钮和错误/成功消息的div。 b $ b我认为这样做的另一种形式是将第二部分文件输入并将文件提交到iframe中。在submition之后，我们在第一部分的主窗体中填充隐藏字段或显示错误。

简单的方法是将文件格式添加到主表单中，但它被禁止。

修复我。

$ b $ 使用jQuery

我会创建一个按钮和一个不可见的输入，如下所示：

 < button id =button> Open< / button> 
< input id =file-inputtype =filename =namestyle =display：none;/> 
  

和添加一些jQuery来触发它：

  $ （'#button'）。on（'click'，function（）{
 $（'＃file-input'）。trigger（'click'）; 
}）; 
  

使用Vanilla JS

没有jQuery（积分到@Pascale）

 < button onclick =document.getElementById（'file-input'）。click （）;>开< /按钮> 
< input id =file-inputtype =filename =namestyle =display：none; /> 
  

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

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

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.

Fix me.

解决方案

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;" />

and add some jQuery to trigger it:

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

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打开选择文件对话框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！