0

我需要使用<h:inputFile>. 我正在使用以下代码：

<h:inputFile id="inputFile" value="#{bean.uploadedFile}" styleClass="hidden">
    <f:ajax listener="#{bean.processFile}"/>
</h:inputFile>

...

<button onclick="$('#inputFile').click();">
    Choose file
</button>

正如你所看到的，我隐藏了丑陋的<h:inputFile>东西，只是用一个按钮来模拟点击它。

当我单击该按钮时，将显示文件资源管理器并且我可以选择一个文件，但是一旦选择，页面就会重新加载并且processFile永远不会调用该方法。

如果我删除隐藏类<h:inputFile>，单击它并选择一个文件，一切正常。

我尝试用<h:inputFile>可见来模拟点击，但发生了同样的错误行为。

我能做些什么来模拟点击并保留<h:inputFile>隐藏。

我正在使用带有 JSF 2.3 的 Wildfly。

谢谢

4

1 回答 1

0

我找到了一个仅基于 CSS 的解决方案，无需使用 Javascript 来模拟点击：

<label class="input-type-fix">
    <h:inputFile value="#{bean.uploadedFile}">
        <f:ajax listener="#{bean.processFile}"/>
    </h:inputFile>
    <span>Choose file</span>
</label>

CSS：

.input-type-fix input[type="file"] {
    position:absolute;
    top: -1000px;
}

这样您就不需要隐藏输入文件，您可以将您想要的样式添加到输入文件周围的标签中。我正在使用引导程序，因此可能的样式可能是以下样式：

<label class="btn btn-primaryinput-type-fix">
    <h:inputFile value="#{bean.uploadedFile}">
        <f:ajax listener="#{bean.processFile}"/>
    </h:inputFile>
    <span>Choose file</span>
</label>

如您所见，我只是将引导类添加到周围的标签中。

我找到解决方案的问题（大部分）是以下问题： 文件上传按钮的跨浏览器自定义样式

于 2019-05-08T01:14:35.583 回答