修改 <h:InputFile> 的默认 "Choose File" 标签

Question

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

Answer 1

原生 HTML 无法做到这一点。外观和按钮的标签取决于浏览器。特定的 "Choose File" 标签可识别为来自 Chrome 的带有英语语言包的标签（例如 FireFox 使用 "Browse..."）。由于 JSF 在这个问题的上下文中只是一个 HTML 代码生成器，它也不能为你做什么。

有几种方法可以实现这一点。都可以在这个HTML+CSS针对性问答中找到：Styling an input type="file" button, particularly 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 技巧并以生成所需 HTML+CSS(+JS) 输出的方式重写 JSF 代码。

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

修改 <h:InputFile> 的默认 "Choose File" 标签

Modifiying default "Choose File" label of <h:InputFile>

jsf

label

file-upload

jsf-2.2