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 &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[]中没有文件发送到服务器。

Answer 1

您无法使用AJAX上传文件。这不受支持。如果您想这样做，可以使用某些文件上传插件，例如Uploadify或Blueimp File Upload，或者如果客户端浏览器支持，则使用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的{{1}}

祝你好运：）。

无法异步使用Ajax.BeginForm（）上传文件

4 个答案: