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

我看到您正在使用jquery.form插件来 AJAXifying 表单并从控制器操作返回 JSON。以下是文档中关于这种情况的说明：

由于无法使用浏览器的 XMLHttpRequest 对象上传文件，因此表单插件使用隐藏的 iframe 元素来帮助完成任务。这是一种常见的技术，但它具有固有的局限性。iframe 元素用作表单提交操作的目标，这意味着将服务器响应写入 iframe。如果响应类型是 HTML 或 XML，这很好，但如果响应类型是脚本或 JSON，则效果不佳，这两种类型通常都包含在 HTML 标记中找到时需要使用实体引用来表示的字符。

为了解决脚本和 JSON 响应的挑战，表单插件允许将这些响应嵌入到 textarea 元素中，建议您在与文件上传结合使用时对这些响应类型这样做。

因此，要使其正常工作，来自服务器的响应需要如下所示：

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

这是这个自定义FileUploadJsonResult在您的控制器操作中所做的吗？

于 2011-05-09T07:35:31.653 回答