Question

我一直在搜索类似的问题，但不幸的是，似乎没有一个对我有用。

我在做什么：我有一个主页面，上面有一个上传文件的链接。单击该链接后，将打开一个带有简单上传表单的模式窗口：

<div id="uploadResults">
@using (Html.BeginForm("_uploadDocument", "Request", FormMethod.Post, new { id = "uploadDoc", enctype = "multipart/form-data" }))
 {
    <input name="eGuid" value="@ViewBag.eGuid" id="eGuid" type="hidden" />
    <input name="result" id="result" value="@ViewBag.result" type="hidden" />
    <label for="attachment">Attachment:</label><input type="file" name="attachment" id="attachment" />
    <br />
    <input type="submit" name="submit" value="Upload" class="txtButton" />
 }
</div>

在提交表单时，我想在控制器中调用我的_uploadDocument方法。如果上传成功，则关闭模态窗口，以便再次出现父窗口。如果出现错误，请保持模态窗口存在并显示一些通知文本。

我的httppost控制器（道歉，我尝试了几种方法，所以你会看到一些注释掉的位）：

[HttpPost]
        public void _uploadDocument(string eGuid, HttpPostedFileBase attachment)
        {
            // store result txt
            string result = "";

            // check for uploaded file
            if (attachment != null && attachment.ContentLength > 0)
            {
                // get filename
                var uploadedFileName = Path.GetFileName(attachment.FileName);
                var newFileName = eGuid + "_" + uploadedFileName;

                // store to the shared directory
                var path = System.Web.Configuration.WebConfigurationManager.AppSettings["UploadDirectory"];
                var savePath = Path.Combine(path, newFileName);
                try
                {
                    attachment.SaveAs(savePath);
                    result = "success";
                }
                catch
                {
                    result = "There was an issue uploading your file";
                }
            }
            else
            {
                result = "No file was chosen for upload";
            }

            ViewBag.result = result;
            ViewBag.eGuid = eGuid;
            //return PartialView("_uploadDocument");
            //return Json(new { result = result});
            //return Json(result);
        }

在上面的表格所在的模态窗口中，我尝试了以下jquery：

$("#uploadDoc").submit(function (e) {
        $.post(this.action, { eGuid: $('#eGuid').val(), attachment: $('#attachment') }, function () {
            $("#dialog5").dialog('close');
            //alert("In");
            //return false;
        });
        //$.post(this.action, { eGuid: $('#eGuid').val(), attachment: $('#attachment') });
        return false;
    });

我的结果 - 如果我序列化传递的数据，那么成功函数会触发，但文档不会上传（因此模态窗口会关闭，但不会上传文档）。

如果我使用上面的代码，那么文档会上传，但在提交后我被带到一个空白的白色屏幕......

我当然感谢任何指针！

UPDATE 这是从父页面打开模态窗口的代码：

// person look-up modal window
    $(function () {
        $('#dialog5').dialog({
            autoOpen: false,
            width: 400,
            resizable: false,
            title: 'Upload Document',
            dataType: "json",
            modal: true,
            open: function (event, ui) {
                var updateArea = $(this).data('area');
                //alert(updateArea);
                $(this).load('@Url.Action("_uploadDocument", "Request")' + '?eGuid=' + updateArea);
            },
            cancel: function (event, ui) {
                $(this).dialog("close");
            }
        });

        $('.attachDocument').live("click", function () {
            var field = this.name;
            $('#dialog5').data('area', field).dialog('open');
        });
    });

Answer 1

如果不使用html 5，iframe黑客等，您无法通过ajax上传文件。在我看来，您最好的选择是使用上传器，例如uploadify或plupload。

Binding-httppostedfilebase-using-ajax-beginform是一个类似的问题，有一些很好的建议如何解决这个问题。

Answer 2

看起来你可能已走上正轨，但放弃了它。

您无法从空格中正确发出return声明。您是否考虑过将uploadDocument方法设为bool而不是void并返回成功状态？

这样你可以做类似的事情：

$.post(this.action, { eGuid: $('#eGuid').val(), attachment: $('#attachment') }, function (data) {
  if(data == true) {
    $('#uploadResults').hide();
  }
});

提交表格后关闭模态窗口

2 个答案: