无法打开文件对话框,标签内有按钮

时间:2015-11-05 11:25:31

标签: html css html5

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

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

2 个答案:

答案 0 :(得分:3)

Label表示用户界面中项目的“标题”。 您的按钮不起作用的原因是因为按钮不被视为“控制”元素的有效“标题”,因为它是“控制”元素。 (见: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向用户显示他选择了哪些文件

答案 1 :(得分:-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");
})