无法使用标签内的按钮打开文件对话框 [英] Cant open file dialog with button inside label

问题描述

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

To hide (but retain the functionality) the ugly default input type file button for file dialog I used the following mechanism:

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
}

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

This is working expectedly: I click on the font awesome edit icon and the file dialog pops up.

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

However, when I use a button it stops working. I get no file dialog on clicking the button:

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

推荐答案

标签代表用户界面中项目的标题".您的按钮不起作用的原因是因为按钮不被视为控件"元素的有效标题"，因为它是控件"元素.(参见:https://developer.mozilla.org/nl/docs/网页/HTML/元素/标签)

The Label represents a "caption" for an item in a user interface. The reason why your button isn't working is because a button isn't considered a valid "caption" for a "control" element because it is a "control" element. (see: https://developer.mozilla.org/nl/docs/Web/HTML/Element/label)

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

If you use an image or a piece of text inside the label it will work, because that will be considered a caption (this is why your first attempt worked). If you want to create a custom button you can use some text or an image tag otherwise you'll need some javascript.

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

maybe this page can be of help: http://webmuch.com/how-to-customize-a-file-upload-button-using-css3-html5-and-javascript/ The javascript they use shows the user what file (s)he has selected

这篇关于无法使用标签内的按钮打开文件对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！