我在涉及 1-4 个图像上传字段的提交表单上使用 LiveValidation。客户不耐烦的是，一旦他们点击提交，表单就会开始上传图像，并且根据这些图像的大小需要时间。
我试图实现的是，一旦用户提交表单，并且LiveValidation通过，就会出现一个Fancybox弹出窗口，其中包含加载图像和一些文本。我不想要加载进度条，因为客户端的托管没有 PECL 上传进度扩展或 APC，并且出于兼容性原因我不想使用 AJAX。
我只想让加载图像在屏幕上旋转，以便用户知道他们必须等待。
我尝试为它创建一个函数并将其设置为在"onSubmit"和"onClick"事件上执行，但无论哪种情况，即使 LiveValidation 指出的表单中存在错误，也会出现弹出窗口。
另外，我假设一旦上传图像并提交表单，页面将自动重定向到确认。
我不擅长javascript，因此无法操作脚本以达到预期的结果。
对此的任何帮助将不胜感激。此外，如果有人有更好的解决方案，那也很棒！
谢谢:)
对于实时验证，我直接从网站上使用脚本：http://livevalidation.com/
这是实时验证和花式盒子启动：
<script type="text/javascript">
$(document).ready(function () {
$(".form-validate-label").validate();
$(".form-validate-p").validate({errorElement: "p"});
$(".popup").fancybox();
});
</script>
表单本身非常大，但这里是字段区域：
<form name="frmsubmission" id="frmsubmission" method="post" class="form-validate-p" enctype="multipart/form-data" action="">
...
...
<div class="regrow1">
<div>
<label class="label-large"><span class="required">*</span>Headshot Image File:</label>
<input class="required" name="head_shot" id="head_shot" size="40" type="file" />
</div>
</div>
<div class="regrow2">
<div>
<label class="label-large">Attach Resume:</label>
<input name="txtcv" id="txtcv" size="40" type="file" />
</div>
</div>
<div class="regrow1">
<div>
<label class="label-large">Full body shot Image File:</label>
<input id="body_shot" name="body_shot" size="40" type="file" />
</div>
</div>
<div class="regrow2">
<div>
<label class="label-large">Sanpshot Image File:</label>
<input id="snap_shot" name="snap_shot" size="40" type="file" />
</div>
</div>
<br /><br />
<div id="submitrow">
<button id="submit" name="submit" value="Submit" type="submit">Submit</button>
</div>
</form>
而不是使用fancybox和其他方法。 如果您使用plupload，我认为它会很好地卸载界面和上传状态功能。 下面是链接。请参阅这可能会对您有所帮助。
http://www.plupload.com/example_queuewidget.php
我没有显示花式盒子，而是添加了一个带有 loadId 的div。 最初，当您单击"提交"按钮时，它将隐藏它显示div，在此div 内，您旋转图像路径。 这是完整的代码。
如果你不想使用jQuery，你也可以使用JavaScript来隐藏和显示。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="Js/LiveValidation.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".form-validate-label").validate();
$(".form-validate-p").validate({ errorElement: "p" });
$(".popup").fancybox();
});
function showloading() {
$("#loadingId").show();
}
</script>
</head>
<body>
<form name="frmsubmission" id="frmsubmission" method="post" class="form-validate-p"
enctype="multipart/form-data" action="">
<div class="regrow1">
<div id="loadingId" style="display:none;">Loading....</div>
<div>
<label class="label-large">
<span class="required">*</span>Headshot Image File:</label>
<input class="required" name="head_shot" id="head_shot" size="40" type="file" />
</div>
</div>
<div class="regrow2">
<div>
<label class="label-large">
Attach Resume:</label>
<input name="txtcv" id="txtcv" size="40" type="file" />
</div>
</div>
<div class="regrow1">
<div>
<label class="label-large">
Full body shot Image File:</label>
<input id="body_shot" name="body_shot" size="40" type="file" />
</div>
</div>
<div class="regrow2">
<div>
<label class="label-large">
Sanpshot Image File:</label>
<input id="snap_shot" name="snap_shot" size="40" type="file" />
</div>
</div>
<br />
<br />
<div id="submitrow">
<button id="submit" name="submit" value="Submit" type="submit" onclick="showloading();">Submit</button>
</div>
</form>
</body>
</html>