修改 <h:InputFile> 的默认“选择文件”标签答案

【问题标题】：Modifiying default "Choose File" label of <h:InputFile>修改 <h:InputFile> 的默认“选择文件”标签
【发布时间】：2015-10-09 16:24:52
【问题描述】：

我想知道当我在 JSF 中使用标签 <h:InputFile> 时，是否有一种方法可以标记和重命名 JSF Choose a File 显示的文本。

【问题讨论】：

修正语法和格式。

标签： jsf file-upload label jsf-2.2

【解决方案1】：

这在原生 HTML 中是不可能的。外观和按钮的标签取决于浏览器。特定的“选择文件”标签可识别为带有英文语言包的 Chrome 中的标签（例如，FireFox 使用“浏览...”）。由于 JSF 在这个问题的上下文中只是一个 HTML 代码生成器，所以它也不能为您做很多事情。

有几种方法可以实现这一点。所有内容都可以在这个以 HTML+CSS 为目标的问答中找到：Styling an input type="file" button，尤其是this answer。

最简单的方法是通过<h:outputLabel for> 引用它，将其样式化为按钮并隐藏实际的文件上传组件。单击标签元素将像往常一样将单击事件委托给关联的输入元素。另见Purpose of the h:outputLabel and its "for" attribute。

这是一个不兼容 IE 的启动示例（在 IE 的继任者 Edge 中是 supported）：

<h:outputLabel for="file" value="Pick a file" styleClass="upload" />
<h:inputFile id="file" value="#{bean.file}" styleClass="upload" />

label.upload {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    padding: 2px;
    cursor: pointer;
}

input.upload {
    display: none;
}

如果您也想支持 IE9+，请将 appearance: button 替换为 background 和 border。让它看起来像一个真正的按钮更难。以下内容远非理想，但至少可以帮助您入门。

label.upload {
    padding: 2px;
    border: 1px solid gray;
    border-radius: 2px;
    background: lightgray;
    cursor: pointer;
}

如果您也想支持 IE6-8，它不会将标签的点击事件委托给隐藏的输入元素，那么好吧，请前往上述相关问题的 CSS 技巧，并以这样的方式重写 JSF 代码生成所需的 HTML+CSS(+JS) 输出的方式。

一个完全不同的选择是获取一个面向 UI 的 JSF 组件库，例如基于 jQuery UI 的 PrimeFaces。另见其<p:fileUpload> showcase。

【讨论】：