Ajax.BeginForm不能按预期工作 [英] Ajax.BeginForm is not working as expected

问题描述

我对Aajx.BeginForm有一个非常奇怪的问题。我有此代码：

I have a very strange problem with Aajx.BeginForm. I have this code :

视图：

In view :

@using (Ajax.BeginForm("Upload", "Profile", new AjaxOptions() { HttpMethod = "POST" }, new { enctype = "multipart/form-data" }))
    {
        @Html.AntiForgeryToken()
        <input type="file" name="files"><br>
        <input type="submit" value="Upload File to Server">
    }

在控制器中：

[HttpPost]
[ValidateAntiForgeryToken]
public void Upload(IEnumerable<HttpPostedFileBase> files)
{
    if (files != null)
    {
        foreach (var file in files)
        {
            // Verify that the user selected a file
            if (file != null && file.ContentLength > 0)
            {
                // extract only the fielname
                var fileName = Path.GetFileName(file.FileName);
                // TODO: need to define destination
                var path = Path.Combine(Server.MapPath("~/Upload"), fileName);
                file.SaveAs(path);
            }
        }
    }
}

问题是提交表单时我得到了空文件。我读了很多与我的问题相同的问题，但是大多数答案是输入type = file的名称与控制器中参数名称的名称不同。我找到了一些示例，我尝试这一个除了jquery文件外，几乎与我的代码相同，因此我尝试用以下文件替换jquery文件：

The problem is that I get null file when the form is submit. I read many question that is the same of my question, but most of the answers was that the name of input type="file" is not as the same name of the parameter name in the controller. I found some examples, I try this one which is almost the same of my code except for the jquery files, so I tried to replace the jquery files with these files :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>

这就是惊喜！提交表单后，我得到了文件，但表单已发回。这是工作，因为没有ajax。我在Google中搜索Ajax.BeginFrom，该帖子回发了，并发现了stackoverflow中的许多解决方案，大多数答案是 jquery.unobtrusive-ajax 文件必须包含在页面中。就像是一堆问题，一旦解决了一个问题，就会得到另一个。我会错过吗？

And here is the surprise !!. When the form is submit, I get the file but the form is post back. It is work as there is no ajax. I search in google for Ajax.BeginFrom that is post back and found many solutions in stackoverflow and most of of the answers was that jquery.unobtrusive-ajax file must be included in the page. It like a circle of problems, once you solve one you get another. Does I miss something ?

推荐答案

您不能使用 Ajax.BeginForm（）。辅助程序使用 jquery.unobtrusive-ajax.js 文件通过ajax函数提交数据，该函数不允许 multipart / form-data enctype 。

You cannot submit files with Ajax.BeginForm(). The helper uses the jquery.unobtrusive-ajax.js file to submit the data using ajax functions which do not allow multipart/form-data enctype.

一种选择是使用 FormData （但旧版浏览器不支持）。将 Ajax.BeginForm（）更改为 Html.BeginForm（），然后处理表单提交事件

One option is to use FormData (but not supported in older browsers). Change the Ajax.BeginForm() to Html.BeginForm() and then handle the forms submit event

$('form').submit(function() {
  var formdata = new FormData($('form').get(0));
  $.ajax({
    url: '@Url.Action("YourActionName", "YourControllerName")',
    type: 'POST',
    data: formdata,
    processData: false,
    contentType: false,
    success: function() {
      .... // do something?
    }       
  });
});

此外，还有许多jquery插件可用于上传文件（其中14个列在< a href = http://designscrazed.org/html5-jquery-file-upload-scripts/ rel = nofollow>此处）

In addition there are numerous jquery plugins that you can use for uploading files (14 of them are listed here)

旁注：您的文件输入仅允许选择一个文件，因此您的方法参数应为 HttpPostedFileBase文件（而不是 IEnumerable< HttpPostedFileBase>文件），或者在文件输入中包含 multiple 属性。

Side note: Your file input allows selection of only one file, so your method parameter should be HttpPostedFileBase files (not IEnumerable<HttpPostedFileBase> files) or alternatively, include the multiple attribute in the file input.

这篇关于Ajax.BeginForm不能按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！