0

我在涉及 1-4 个图像上传字段的提交表单上使用 LiveValidation。客户不耐烦的是，一旦点击提交，表单就开始上传图片，根据图片的大小需要时间。

我想要实现的是，一旦用户提交表单并且 LiveValidation 通过，就会出现一个 Fancybox 弹出窗口，其中包含加载图像和一些文本。我不想要加载进度条，因为客户端的主机没有 PECL 上传进度扩展或 APC，并且出于兼容性原因我不想使用 AJAX。

我只想让加载图像在屏幕上旋转，以便用户知道他们必须等待。

我尝试为其创建一个函数并将其设置为在“onSubmit”和“onClick”事件上执行，但无论哪种情况，即使LiveValidation指出的表单中存在错误，也会出现弹出窗口.

此外，我假设一旦图像上传并提交表单，页面将自动重定向到确认。

我不擅长 javascript，因此无法操纵脚本来达到预期的效果。

对此的任何帮助将不胜感激。另外，如果有人有更好的解决方案，那也很棒！

谢谢 ：）

对于实时验证，我直接从网站使用脚本：http: //livevalidation.com/

这是 livevalidation 和 fancybox 启动：

    <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>
4

1 回答 1

0

而不是使用fancybox和其他方法。如果您使用 plupload，我认为它会很好的 uload 界面和上传状态功能。以下是链接。请参阅这可能对您有所帮助。

http://www.plupload.com/example_queuewidget.php

我没有显示fancybox，而是添加了一个带有loadingId 的div。最初它会在您单击时隐藏，提交按钮它显示 div，在此 div 内，您旋转图像路径。这是完整的代码。

我正在使用 jquery 进行隐藏显示。如果你不想使用 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>
于 2012-05-07T09:45:55.473 回答