无法使用标签内的按钮打开文件对话框答案

【问题标题】：Cant open file dialog with button inside label无法使用标签内的按钮打开文件对话框
【发布时间】：2015-11-07 03:50:47
【问题描述】：

为了隐藏（但保留功能）文件对话框的丑陋默认输入类型文件按钮，我使用了以下机制：

HTML：

    <label for="file-input">
        <i class="fa fa-edit"></i> <!-- acts as file input on click-->
    </label>
    <input type="file" id="file-input" />

CSS：

#file-input {
    display: none; //hide the file input
}

这是预期的工作：我点击字体真棒编辑图标，文件对话框弹出。

但是，当我使用按钮时，它会停止工作。单击按钮时没有文件对话框：

    <label for="file-input">
        <button type="button">Upload file</button> <!-- not working-->
    </label>
    <input type="file" id="file-input" />

【问题讨论】：

标签： css html

【解决方案1】：

标签代表用户界面中项目的“标题”。您的按钮不起作用的原因是因为按钮不是“控制”元素的有效“标题”，因为它是“控制”元素。（见：https://developer.mozilla.org/nl/docs/Web/HTML/Element/label）

如果您在标签内使用图像或一段文字，它将起作用，因为这将被视为标题（这就是您第一次尝试成功的原因）。如果你想创建一个自定义按钮，你可以使用一些文本或图像标签，否则你需要一些 javascript。

编辑：也许这个页面可以帮助：http://webmuch.com/how-to-customize-a-file-upload-button-using-css3-html5-and-javascript/ 他们使用的 javascript 向用户显示他选择了哪些文件

【讨论】：

【解决方案2】：

只需更改 jQuery 代码，HTML 标记就会保持原样。

    <label for="file-input">
        <button class="upload_file" type="button">Upload file</button> <!-- not working-->
    </label>
    <input type="file" id="file-input" />

jQuery 代码：

jquery("[for=file-input] .upload_file").on("click", function(){
    jQuery("#file-input").trigger("click");
})

【讨论】：

我不想在我的按钮中添加一个图标。添加“fa fa-edit”会添加一个编辑图标。
我没有使用 jquery，这与 javascript 没有任何关系。
但是 fa-edit 图标上有一些 jquery 代码会触发文件收件箱
点击不代表jquery。它是一个输入类型文件。如果单击输入类型文件，则会打开一个文件对话框。
但没有点击输入类型文件按钮，你点击了那个图标，这将触发输入类型文件点击。