gpt4 book ai didi

javascript - 上的客户端验证

转载 作者:行者123 更新时间:2023-11-30 11:57:20 24 4
gpt4 key购买 nike

我的 JSF View 使用普通 <h:inputFile> 上传文件.一旦选择文件(onchange 事件),它就有一个 AJAX Action 开始上传。我想对文件做一些基本的验证,使用 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com