c# - 无法使用 Ajax.BeginForm() 异步上传文件

Question

我正在尝试使用 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 && file.ContentLength > 0)
   {
      file.SaveAs(string.Concat(
            AppDomain.CurrentDomain.BaseDirectory,
            Path.GetFileName(file.FileName)));

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

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

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

Answer 1

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

Answer 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

Answer 3

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

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

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

Answer 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" } 告诉剃刀页面添加enctype可以通过的新的HttpPostedFileBase

祝你好运：）。