Question

我在提交表单上使用LiveValidation，其中包含1-4个图像上传字段。客户对此感到不耐烦的是，一旦他们点击提交，表单就会开始上传图片，并且根据这些图片的大小需要时间。

我想要实现的是，一旦用户提交表单，并且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>

Answer 1

而不是使用fancybox和其他方法。如果你使用plupload，我认为它将很好的uload接口和上传状态功能。下面是链接。请看这可能对你有帮助。

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

而不是show 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>

仅在表单提交后打开Fancybox如果LiveValidation成功

1 个答案: