jsf - 修改 的默认 "Choose File"标签

Question

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

Answer 1

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

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

最简单的方法是通过 <h:outputLabel for> 引用它，将其样式化为按钮并隐藏实际的文件上传组件。单击标签元素将像往常一样将单击事件委托(delegate)给关联的输入元素。另见 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，它不会将标签的点击事件委托(delegate)给隐藏的输入元素，那么，请前往前面提到的 CSS 技巧相关问题，并以这样的方式重写 JSF 代码准确生成所需的 HTML+CSS(+JS) 输出。

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