1

アップロードが成功した後、ダイアログがポップアップしませんか? アップロードは正常に機能しますが、$("#dialog-confirm").dialog は機能しませんか?

<h2>
    upload Data</h2>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="../../Scripts/jqueryform.js" type="text/javascript"></script>
<script src="../../Scripts/jblock.js" type="text/javascript"></script>

<script src="../../Content/jquery-ui-1.8.12.custom/js/jquery-ui-1.8.12.custom.min.js"
    type="text/javascript"></script>

<link href="../../Content/jquery-ui-1.8.12.custom/css/ui-lightness/jquery-ui-1.8.12.custom.css"
    rel="stylesheet" type="text/css" />



<script type="text/javascript">
    $(function () {
        $("#ajaxUploadForm").ajaxForm({
            iframe: true,
            dataType: "json",
            beforeSubmit: function () {
                $("#ajaxUploadForm").block({ message: '<h1><img src="/Content/busy.gif" /> uploading file...</h1>' });
            },
            success: function (result) {
                $("#ajaxUploadForm").unblock();
                $("#ajaxUploadForm").resetForm();
                $.growlUI(null, result.message);

                //alert(result.message);

                //does not popup??
                $("#dialog-confirm").dialog({
                    resizable: false,
                    height: 140,
                    modal: true,
                    buttons: {
                        "Ok":
                        function () {
                            alert('ok');
                            $(this).dialog("close");
                        }
                    ,
                        Cancel: function () {
                            $(this).dialog("close");
                        }
                    }
                });


            },
            error: function (xhr, textStatus, errorThrown) {
                $("#ajaxUploadForm").unblock();
                $("#ajaxUploadForm").resetForm();
                $.growlUI(null, 'Error uploading file');
            }
        });
    });
</script>
<form id="ajaxUploadForm" action="<%= Url.Action("AjaxUpload", "Home")%>" method="post"    enctype="multipart/form-data">
<fieldset>
    <legend>Upload a file</legend>
    <label>
        File to upload:
        <input type="file" name="file" />(100MB max size)</label>
    <input id="ajaxUploadButton" type="submit" value="Submit" />
</fieldset>
</form>


  public FileUploadJsonResult AjaxUpload(HttpPostedFileBase file)
    {
        // TODO: Add your business logic here and/or save the file
        System.Threading.Thread.Sleep(2000); // Simulate a long running upload

        // Return JSON
        return new FileUploadJsonResult { Data = new { message = string.Format("{0} uploaded successfully.", System.IO.Path.GetFileName(file.FileName)) } };
    }
4

1 に答える 1

0

フォームを AJAX 化し、コントローラー アクションから JSON を返すためにjquery.formプラグインを使用しているようです。このシナリオに関するドキュメントの内容は次のとおりです。

ブラウザの XMLHttpRequest オブジェクトを使用してファイルをアップロードすることはできないため、フォーム プラグインは非表示の iframe 要素を使用してタスクを支援します。これは一般的な手法ですが、固有の制限があります。iframe 要素は、フォームの送信操作のターゲットとして使用されます。これは、サーバーの応答が iframe に書き込まれることを意味します。これは、応答の種類が HTML または XML の場合は問題ありませんが、応答の種類がスクリプトまたは JSON の場合はうまく機能しません。どちらにも、HTML マークアップで見つかった場合にエンティティ参照を使用して表現する必要がある文字が含まれていることがよくあります。

スクリプトと JSON 応答の課題を説明するために、フォーム プラグインでは、これらの応答を textarea 要素に埋め込むことができます。ファイルのアップロードと組み合わせて使用​​する場合は、これらの応答の種類に対してこれを行うことをお勧めします。

したがって、これが機能するには、サーバーからの応答が次のようになる必要があります。

<textarea>{ message: 'file uploaded successfully' }</textarea>

このカスタムFileUploadJsonResultがコントローラー アクションで行っていることは何ですか?

于 2011-05-09T07:35:31.653 に答える