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

ファンシーボックスなどのアプローチを使用する代わりに。plupload を使用すると、uload インターフェイスとアップロード ステータス機能が便利になると思います。以下はリンクです。これが役立つ場合があります。

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

ファンシーボックスを表示する代わりに、loadingId を含む 1 つの 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 に答える