Question

我有一个锚a.add_input链接，它负责将file输入字段添加到当前文档中（通过jQuery）。输入附加到其他文件输入字段的列表（在OneToMany关系的上下文中多个文件上载）。

最终结果如下：

<input type="file" id="1" name="...">
<input type="file" id="2" name="...">
<input type="file" id="3" name="...">
<input type="file" id="4" name="...">
<a href="#" class="add_input">Add an input</a>

如您所知，文件输入字段使用弹出窗口的按钮进行渲染。该窗口允许用户选择文件。我想隐藏该按钮给最终用户并允许他在点击锚点后直接看到窗口。但我还需要将文件链接到其特定的输入文件（服务器端代码需要它）。

我知道也许我在这篇文章中有两个问题，但我认为它们是一个问题。

有人可以纠正我或提供有关如何操作的见解吗？非常感谢你的帮助。

Answer 1

不需要花哨，你可以简单地使用<label>！

<div>
    <label for="file">Click me</label>
    <input type="file" id="file" style="display: none" />
</div>

<div>
    or
    <label>Click me 2
        <input type="file" id="file2" style="display: none" />
    </label>
</div>

Answer 2

正如@phts所说，在IE中，用户必须直接与元素交互（不能以编程方式触发它）。然而，您可以使元素不可见（通过将其设置为0的不透明度）并将其定位在锚标记（或任何内容）之上，以便用户点击链接，实际上他们点击文件输入（因此将显示本机文件选择器对话框）。

这是解决您所描述问题的常用方法。下面是一个例子（在第二个div中，我将输入的不透明度保留为1，这样你就可以看到发生了什么）：

＆＃13;

.container { position: relative; margin: 0 0 40px;}
.chooser { position: absolute; z-index: 1; opacity: 0; cursor: pointer;}
.chooser-2 { opacity:1;}

＆＃13;

<div class="container">
  <input type="file" class="chooser">
  <a href="#">Click me to choose a file</a>
  </div>

<div class="container">
  <input type="file" class="chooser chooser-2">
  <a href="#">Click me to choose a file</a>
  </div>

＆＃13;

Answer 3

Firefox，Chrome允许在click元素上触发input file事件。在这种情况下，将显示本机filechooser对话框。

IE（任何版本）不允许此类行为。 IE允许仅通过用户单击“浏览”按钮来选择文件。因此，不可能直接在单独的锚点击上打开filechooser对话框。

打开＆＃39;选择文件＆＃39;窗口onclick on anchor link（跳过点击＆＃39;选择文件＆＃39;按钮）

3 个答案: