无法使用 Ajax.BeginForm() 异步上传文件答案

【问题标题】：Not able to upload file using Ajax.BeginForm() asynchronously无法使用 Ajax.BeginForm() 异步上传文件
【发布时间】：2013-06-11 06:41:10
【问题描述】：

我正在尝试使用 Ajax.BeginForm() 上传文件，但没有成功。

我的观点包含：

@using (Ajax.BeginForm("UploadFile", null, new AjaxOptions { HttpMethod="POST",     UpdateTargetId = "result" }, new { enctype = "multipart/form-data" }))
{
   <label id="lblUploadNewFile" for="fileUploadControl">Upload New File&lt;/label>
   <input type="file" name="fileToUpload" id="fileUploadControl"/>
   <input id="btnFileUpload" type="submit" value="Upload" />
   <span id="result" />
}

对应的Controller是：

[HttpPost]
public string UploadFile(FormCollection formData)
{
   HttpPostedFileBase file=null;

   try
   {
      file = Request.Files[0];
   }
   catch { }

   if ( file!=null &amp;&amp; file.ContentLength &gt; 0)
   {
      file.SaveAs(string.Concat(
            AppDomain.CurrentDomain.BaseDirectory,
            Path.GetFileName(file.FileName)));

      return &quot;Successfully Uploaded&quot;;
   }
   else
   {
      return &quot;Upload Failed, please try again.&quot;;
   }
}

问题是它正在上传文件，但当我删除 jquery.unobtrusive-ajax.js 时不再做任何异步帖子。相反，它会进行完整的回发。

当我在我的视图中添加jquery.unobtrusive-ajax.js 时，它是异步执行的，但它不是在表单数据中发送上传文件。没有文件被发送到Request.Files[] 中的服务器。

【问题讨论】：

由于显而易见的原因，Ajax 不可能：您可以构建一个页面帽子，将访问者文件系统上的任何可访问文件上传到服务器而不告诉他。

标签： c# javascript asp.net-mvc-4

【解决方案1】：

您不能使用 AJAX 上传文件。这是不支持的。如果您想这样做，您可以使用一些文件上传插件，例如 Uploadify 或 Blueimp File Upload，或者如果客户端浏览器支持，则使用 HTML 5 File API。

【讨论】：

感谢 Darin 的回复，我会尝试实现 Blueimp，因为 Uploadify 需要 Flash。
我正在使用 steven 分享的 jQuery-asyncUpload：blog.stevensanderson.com/2008/11/24/…
@Darin Dimitrov，我不明白你的回答。根据this other StackOverflow question，实际上支持文件上传，并且在其他答案中给出了这样做的方法。你能澄清一下你说的话吗？
@Darin Dimitrov 是的，您能否就这个问题向我们解释一下？

【解决方案2】：

您无需额外的库即可做到这一点。

我遇到了这个小技巧，它很好地解决了它

window.addEventListener("submit", function (e) {
    var form = e.target;
    if (form.getAttribute("enctype") === "multipart/form-data") {
        if (form.dataset.ajax) {
            e.preventDefault();
            e.stopImmediatePropagation();
            var xhr = new XMLHttpRequest();
            xhr.open(form.method, form.action);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    if (form.dataset.ajaxUpdate) {
                        var updateTarget = document.querySelector(form.dataset.ajaxUpdate);
                        if (updateTarget) {
                            updateTarget.innerHTML = xhr.responseText;
                        } 
                    }
                }
            };
            xhr.send(new FormData(form));
        }
    }
}, true);

找到http://www.acnenomor.com/1762557p1/c-mvc3-ajaxbeginform-to-upload-file-not-working

【讨论】：

http://www.acnenomor.com/1762557p1/c-mvc3-ajaxbeginform-to-upload-file-not-working 已不复存在；这是一个复制 Stack Overflow 的爬虫网站，你真的找到了this post。
无论你是谁，我都会找到你并爱你！
但是如何实现表单的回调呢？？

【解决方案3】：

您可以这样做来完成这项工作：从 nuget 获取 jquery.form 库并将其导入您的 cshtml 文件。您应该使用 @Html.BeginForm 创建表单。然后在你的表单底部编写这个脚本来 ajax 化你的表单：

$(function(){
  $('#formId').ajaxForm({
    complete:function(xhr){...},
    success:function(){...},
    error: function(){...}
  });
});

通过这些步骤，您可以将文件传递给控制器。

【讨论】：

【解决方案4】：

非常简单的解决方案：

  @using (Ajax.BeginForm("action", "controller", new AjaxOptions
        {
            HttpMethod = "post",
            InsertionMode = InsertionMode.Replace,
            OnBegin = "startLoader",
            OnSuccess = "Update_Record",
            UpdateTargetId = "Succ_Msg"
        },new { enctype = "multipart/form-data" }))

注意新的{ enctype = "multipart/form-data" } 它告诉剃须刀页面添加可以传递HttpPostedFileBase的enctype

祝你好运:)。

【讨论】：

嘿@tzuk，这正是我发布的问题！