javascript - 单击 anchor 链接打开 'Choose file' 窗口(跳过单击 'Choose file' 按钮)

Question

我有一个 anchor a.add_input链接，负责向当前文档添加(通过jQuery)file输入字段。输入将附加到其他文件输入字段的列表中(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> 

如您所知，文件输入字段是通过弹出窗口的按钮呈现的。该窗口允许用户选择文件。我想向最终用户隐藏该按钮，并允许他在单击 anchor 后直接看到该窗口。但我还需要将该文件链接到其特定的输入文件(服务器端代码需要它)。

我知道这篇文章中可能有两个问题，但我将它们视为一个问题。

有人可以纠正我或提供有关如何做到这一点的见解吗？非常感谢您的帮助。

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>