使用jquery对话框上传文件不起作用答案

【问题标题】：Upload file using jquery dialog not working使用jquery对话框上传文件不起作用
【发布时间】：2012-06-07 04:44:07
【问题描述】：

我想使用 jquery 对话框上传文件。我创建了一个局部视图并在对话框中显示该局部视图。

问题是，当我直接浏览局部视图并上传文件时，它可以完美运行。但是当我将部分视图放在 jquery 对话框中时，它会提交表单，但不提交文件。所以我有空值。我真的不明白这里有什么区别！

希望有人能帮我找出问题。

这里有一些代码；

jquery 代码：

$('#UploadDialog').dialog({
        autoOpen: false,
        width: 580,
        resizable: false,
        modal: true,
        open: function (event, ui) {
        $(this).load('@Url.Action("Upload","Notes")');
        },
        buttons: {
            "Upload": function () {
                $("#upload-message").html(''); 
                $("#noteUploadForm").submit();
            },
            "Cancel": function () {
                $(this).dialog("close");
            }
        }
    });
    $(".uploadLink").click(function () {
        $('#UploadDialog').dialog('open');
        });
        return false;
});

局部视图：

@using (Ajax.BeginForm("Upload", "Notes", null, new AjaxOptions
{
UpdateTargetId = "upload-message",
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST",
OnSuccess = "uploadSuccess"
}, new { id = "noteUploadForm" , enctype="multipart/form-data"}))
{
<div>
<div id="upload-message"></div>
<div class="editLabel">
    @Html.LabelFor(m => m.Notes.NoteTitle)
</div>
<div class="editText">
    @Html.TextBoxFor(m => m.Notes.NoteTitle)
</div>
<div class="clear"></div>

<div class="editLabel">
    @Html.Label("Upload file")
</div>
<div class="editText">
    <input type="file" name="file" />(100MB max size)
</div>

</div>
}

【问题讨论】：

您可以检查 jquery 文件更新。它是使用 ajax 完成的一个很好的组件。

标签： jquery asp.net asp.net-mvc asp.net-mvc-3 file-upload

【解决方案1】：

那是因为您无法使用 AJAX 上传文件。

试试这个

http://jquery.malsup.com/form/#file-upload

【讨论】：

【解决方案2】：

无法通过 ajax 直接上传文件内容，您需要序列化文件数据。您需要使用一些插件来执行此操作，或手动序列化文件数据。一些现成的插件是：

其次，请记住 JQuery 对话框将输入元素移出表单。看到这个问题：

Input inside Jquery UI Dialog not being sent?

确保在提交之前附加元素

【讨论】：

【解决方案3】：

您不能使用 ajax 提交带有 multipart/form-data 的表单。您需要为此使用一些插件。

另一个解决方法（获得类似 ajax 的效果）是在您的视图中使用 iframe (<iframe>)，该视图将被隐藏，然后将表单发布到此 iframe 作为目标。如果需要，您可以使用这种形式创建一个对话框。

<form action="controller/action" method="post" target="iframename" id="yourformid">

现在在 iframe 上，您可以绑定 load 事件以检查回发的状态，例如：

 $('#iframename').load(function(){.......});

【讨论】：