Question

我的JSF视图使用普通<h:inputFile>上传文件。它有一个AJAX动作，一旦选择了文件就开始上传（onchange事件）。我想对文件进行一些基本验证，使用HTML5 DOM File API和Javascript，在客户端在某些情况下停止上传。

（是的，我确实理解可以规避带有此检查的Javascript，这对于偶然选择错误文件的普通用户来说只是一个“带宽和时间节省检查” - 仍然会有服务器端验证。而我还要了解File API可能尚未在所有（较旧的）浏览器上使用。）

简化的JSF文件：

<html
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
>
<h:head>
    <h:outputScript target="body">
//<![CDATA[
function doUpload(data, event) {
    if ("event" == data.type) {
        switch (data.status) {
            case "begin":
                // validate file size
                if (data.source.files[0].size > 20971520) { //20MiB
                    alert('ERROR: File too big!');
                    event.preventDefault();
                    return false;
                }
                // TODO show throbber
                break;

            case "complete":
                // TODO hide throbber
                break;

            case "success":
                break;
        }
    }
}
//]]>
    </h:outputScript>
</h:head>
<h:body>
    <h:form id="testuploadform" enctype="multipart/form-data">
        <h:inputFile id="uploadFile" name="uploadFile" value="#{testBean.uploadFile}">
            <!--  TODO validator/s for server-side validation -->
            <f:ajax event="change" listener="#{testBean.ajaxLst_autoUpload}"
                    onevent="function(data){ doUpload(data,event); }"
            />
        </h:inputFile>
    </h:form>
</h:body>
</html>

似乎尽管使用了event.preventDefault()调用，事件仍然会被进一步处理：文件已上传，我的侦听器函数TestBean.ajaxLst_autoUpload()能够获取它并对其进行操作。

我想做的甚至可能吗？我该怎么做呢？

====

我想另一种方法是use the XMLHttpRequest.open() process to issue a request from AJAX（只有一次验证成功），但我不确定如何对JSF执行“有效”POST请求 - 我只看过PHP和Java Servlets的例子。我并不是主要想写一个上传Servlet（尽管可以在需要的时候进行，并且可以用google搜索示例），而且我不了解JSF，知道如何与Servlet相对应。但是，在这方面的任何指针也将受到赞赏。

Answer 1

<f:ajax onevent>中的处理为时已晚。请改用输入组件的onchange属性。基本上是：

<h:inputFile ... onchange="return validate(this)">

<h：inputfile>上的客户端验证

1 个答案: