javascript - <h :inputFile> 上的客户端验证

标签 javascript validation jsf file-upload jsf-2.2

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

(是的,我确实知道带有此检查的Javascript可以被绕过,这只是针对意外选择错误文件的普通用户的“带宽和时间节省检查” - 仍然会有服务器端验证。而且我另请注意,文件 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 (只有验证成功后),但是我不确定如何做“有效”POST请求 JSF - 我只见过 PHP 和 Java Servlet 的示例。我并不是主要热衷于编写上传 Servlet(尽管如果需要的话可以这样做,并且可以在 google 上搜索示例),而且我对 JSF 的了解不太深,不知道它如何与 Servlet 相对应。但任何这方面的指示也将不胜感激。

最佳答案

处理<f:ajax onevent>为时已晚。使用输入组件的onchange属性来代替。基本上:

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

关于javascript - <h :inputFile> 上的客户端验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37566708/

相关文章:

javascript - 如何在 JavaScript 中动态更改 Morris Chart 的数据?

javascript - 获取输入中的值以进行自动完成

asp.net-mvc-3 - 如何为 MVC3 中包含日期属性的 View 模型强制实现正确的全局化行为

javascript - JS 电话号码验证-匹配字符串

JSF commandButton - 将 POST 参数传递到外部站点

带有播放暂停和下一个上一个按钮的 Javascript 幻灯片

javascript - 在 .replace() 之后恢复光标位置

validation - 如果我在TextField的 'setState'中调用 'onChange',首个字母会丢失

jsf - Primefaces ajax事件更改不调用监听器

java - Jsf RichFaces 自动完成 : get the InputValue for autocomplete- method()