修改<h:InputFile>的默认"选择文件"标签

Question

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

Answer 1

使用原生HTML是不可能的.外观和按钮的标签取决于浏览器.特定的"选择文件"标签可以识别为Chrome和英语语言包中的标签(例如FireFox使用"浏览...").由于JSF在这个问题的上下文只是一个HTML代码生成器,它对你也没有多大帮助.

有几种方法可以实现这一目标.所有这些都可以在这个HTML + CSS目标问答中找到:设置输入类型="文件"按钮,特别是这个答案.

最简单的方法是通过<h:outputLabel for>它来引用它,将其设置为看起来像一个按钮并隐藏实际的文件上传组件.单击label元素将照常将click事件委托给关联的input元素.另请参见h:outputLabel及其"for"属性的用途.

这是一个非IE兼容的启动示例(它在IE的后继Edge中得到支持):

<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: buttona 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>展示.