修改默认&“选择文件&"< h:InputFile& gt;的标签 [英] Modifiying default "Choose File" label of <h:InputFile>

问题描述

当我使用标签< h:InputFile> 时，我想知道是否存在一种方法来标记和重命名JSF显示的文本选择文件.

I would like to know if there is a method to label and rename the text displayed by JSF Choose a File when I'm using the tag <h:InputFile> in JSF.

推荐答案

原生HTML无法实现.外观和按钮的标签取决于浏览器.特定的选择文件"标签可识别为带有英语语言包的Chrome中的标签(例如，FireFox使用浏览...").由于JSF只是一个HTML代码生成器，因此它对您也无济于事.

That's not possible with native HTML. The appearance and the button's label is browser-dependent. The particular "Choose File" label is recognizable as the one from Chrome with English language pack (e.g. FireFox uses "Browse..."). As JSF is in the context of this question just a HTML code generator, it can't do much for you either.

有几种方法可以实现此目的.所有内容都可以在此HTML + CSS定位的问答中找到:设置输入类型的样式=";文件按钮，尤其是此答案.

There are several ways to achieve this. All can be found in this HTML+CSS targeted Q&A: Styling an input type="file" button, particularly this answer.

最简单的方法是通过< h:outputLabel for> 对其进行引用，将其设置为类似于按钮的样式，并隐藏实际的文件上传组件.通常，单击label元素只是将click事件委托给关联的input元素.另请参见 h:outputLabel的目的及其"for"属性.

Easiest way is to reference it via <h:outputLabel for>, style it to look like a button and hide the actual file upload component. Clicking the label element will as usual just delegate the click event to the associated input element. See also Purpose of the h:outputLabel and its "for" attribute.

这是不兼容IE的启动示例(在IE的后继Edge中受支持):

Here's a non-IE compatible kickoff example (it's supported in IE's successor 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 +，请用 background 和 border 替换 appearance:button .使其看起来像一个真正的按钮更加困难.以下内容远非理想，但至少应该让您入门.

If you'd like to support IE9+ too, replace appearance: button by a background and border. It's only harder to get it to look like a true button. The below is far from ideal, but should at least get you started.

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

如果您也想支持IE6-8(不会将标签的click事件委派给隐藏的输入元素)，那么，请转至上述相关问题，以获取有关CSS技巧的知识，并以这种方式重写JSF代码完全生成所需的HTML + CSS(+ JS)输出的方式.

If you'd like to support IE6-8 too, which won't delegate the label's click event to the hidden input element, then well, head to the aforementioned related question for CSS tricks on that and rewrite JSF code in such way that it generates exactly the desired HTML+CSS(+JS) output.

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

A completely different alternative is to grab an UI oriented JSF component library, such as PrimeFaces which is based on jQuery UI. See also its <p:fileUpload> showcase.

这篇关于修改默认&“选择文件&"< h:InputFile& gt;的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！