Question

我需要使用<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。

谢谢

Answer 1

我找到了仅基于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>

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

我在哪里找到解决方案（大部分）的问题是以下问题： Cross-browser custom styling for file upload button

模拟对<h：inputfile>的点击不起作用

1 个答案: