如何更改 <p:fileUpload> 的大小答案

【问题标题】：How do i change the size of <p:fileUpload>如何更改 <p:fileUpload> 的大小
【发布时间】：2013-02-22 17:48:15
【问题描述】：

我正在使用<p:fileUpload> 标签来实现文件上传功能。但我需要更改我无法更改的文本框大小。

<h:outputLabel id="attachment_label" value="Add Attachment(s)" styleClass="atf-label" />        
<p:fileUpload value="" mode="simple" style="width:350px"/>

我尝试在 CSS 中设置宽度，但没有任何效果。

【问题讨论】：

我认为这是不可能的，因为简单的文件上传使用标准的浏览器输入文件字段。我想如果你想让它看起来不一样，那么你应该使用高级模式。

标签： jsf primefaces

【解决方案1】：

我已经做了一些测试，看看这是否可行。 Primefaces 将简单的 fileUpload 翻译为：

<input type="file" id="fileUploadForm:j_idt90" name="fileUploadForm:j_idt90" style="">

这基本上是类型文件的标准浏览器输入字段，这意味着在 chrome、firefox 上，即...等它看起来都不同。现在在我的语言环境中，这个框的标准尺寸是 238px，通过增加输入类型的宽度，我确实看到上传的框变大了，但遗憾的是文本框和按钮没有跟随。

如果您希望文件上传有所不同，我建议您查看文件上传的高级模式。您可以在 primefaces 展示中看到它：http://www.primefaces.org/showcase/ui/fileUploadSingle.jsf

编辑：我忘了在 IE8 中测试它（这台电脑上只有 ie8）。在 chrome 中，文本是输出文本，在 Firefox 中，它位于不能变大的 inputtext 字段中，但在 IE8 上，如果我添加宽度：

<p:fileUpload value="#{fileUploadBean.file}" mode="simple" style="width:500px;"/>

输入框确实变大了。

【讨论】：

【解决方案2】：

这是长期以来文件上传功能的一大局限。Primefaces FileUpload也不例外。所以，没有办法改变输入文本框的Width。如果您想了解更多信息和其他选项，请查看此答案：

Can we change <input type="file"> style?

【讨论】：

【解决方案3】：

Primefaces p:fileUpload 文本大小通过应用 inputField styleClass 增加。

style.css

.inputField {
   width: 350px !important;
}

fileUpload.xhtml

<p:fileUpload id="imageId" mode="simple" styleClass="inputField"></p:fileUpload>

【讨论】：