我想知道是否有一种方法可以标记和重命名JSF显示的文本Choose a File
当我使用标签 <h:InputFile>
在 JSF 中。
最佳答案
这对于原生 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 .
关于jsf - 修改 <h :InputFile> 的默认 "Choose File"标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33043065/