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

本文关键字：异步 文件 BeginForm Ajax | 更新日期: 2023-09-27 18:17:45

我正在尝试使用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" />
}

对应的控制器为：

[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.BeginForm() 异步上传文件

不能使用 AJAX 上载文件。不支持此操作。如果你想这样做，你可以使用一些文件上传插件，如Uploadify或Blueimp文件上传，或者使用HTML 5 File API如果客户端浏览器支持它。

无需其他库即可执行此操作。

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

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

你可以这样做来获得这个工作： 从Nuget获取jQuery.Form库并将其导入到CSHTML文件中。您应该使用 @Html.BeginForm 创建表单。然后，在表单底部编写此脚本以 Ajax 化表单：

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

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

非常简单的解决方案：

  @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" }这告诉 Razor 页面添加可以通过HttpPostedFileBase的enctype

祝你好运：(。

相关文章：