Question

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

Answer 1

使用原生HTML无法做到这一点。外观和按钮的标签取决于浏览器。特定的“选择文件”标签可以识别为具有英语语言包的Chrome中的标签（例如，FireFox使用“浏览...”）。由于JSF在这个问题的上下文中只是一个HTML代码生成器，它对你来说也无济于事。

有几种方法可以实现这一目标。所有内容都可以在此HTML + CSS定位Q＆amp; A：Styling an input type="file" button中找到，尤其是this answer。

最简单的方法是通过<h:outputLabel for>引用它，将其设置为看起来像一个按钮并隐藏实际的文件上传组件。单击label元素将照常将click事件委托给关联的input元素。另请参阅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，它不会将标签的click事件委托给隐藏的输入元素，那么，请转到上面提到的关于CSS技巧的相关问题并重写这样的JSF代码它可以生成所需的HTML + CSS（+ JS）输出。

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

修改<h：inputfile>的默认“选择文件”标签

1 个答案: