<h:inputFile> 上的客户端验证答案

【问题标题】：Client-side validation on <h:inputFile><h:inputFile> 上的客户端验证
【发布时间】：2016-06-01 10:57:37
【问题描述】：

我的 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 Servlet 的示例。我主要不是热衷于编写上传 Servlet（尽管可以在需要时完成，并且可以在 Google 上搜索示例），而且我不太了解 JSF，不知道它如何与 Servlet 对应。但在这方面的任何指针也将不胜感激。

【问题讨论】：

标签： javascript validation jsf file-upload jsf-2.2

【解决方案1】：

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

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

【讨论】：

再次感谢您，@BalusC。之后似乎很明显，但当然validate() 应该返回true 或false，并且处理程序也应该返回该值......我错过了玩这个想法的那部分。