我的 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/