使用 MVC 4 和 Ajax 上传文件答案

【问题标题】：File upload using MVC 4 with Ajax使用 MVC 4 和 Ajax 上传文件
【发布时间】：2013-12-23 14:57:11
【问题描述】：

我正在使用 MVC 4 + VS 2012 + Framework 4.5 开发 Web 应用程序。

我的索引页面上有三个部分视图，它们根据用户操作动态呈现。

在三个局部视图中，一个局部视图具有 Upload File 功能，其中包含一些输入字段，例如文本框。

问题：

当用户点击保存按钮时（该按钮出现在局部视图本身上）。我想将输入字段保存到我的数据库中，并将上传的文件存储在共享文件夹中。

我想使用 Ajax 来实现（上传文件并保存数据后，用户应该在同一个视图上）。

如何实现相同的功能？ JQuery 解决方案就好了。

我已尝试使用@Ajax.BeginForm，但在上传文件后，会发生完整的回发。

【问题讨论】：

HTML5 可能不支持早期/旧浏览器。请推荐一些支持旧浏览器的东西。
Ajax Multiple file upload script with Progress bar, Drag and Drop in mvc 4
jQuery ajax upload file in asp.net mvc的可能重复

标签： jquery ajax asp.net-mvc asp.net-mvc-4

【解决方案1】：

这是我的小型工作示例，它上传多个文件并上传到一个名为“垃圾”的文件夹中

客户端....

    <html>
    <head>
    <title>Upload Example</title>
    <script src="~/Scripts/jquery-2.1.0.intellisense.js"></script>
    <script src="~/Scripts/jquery-2.1.0.js"></script>
    <script src="~/Scripts/jquery-2.1.0.min.js"></script>
    <script>
    $(document).ready(function () {
        $("#Upload").click(function () {
            var formData = new FormData();
            var totalFiles = document.getElementById("FileUpload").files.length;
            for (var i = 0; i < totalFiles; i++)
            {
                var file = document.getElementById("FileUpload").files[i];

                formData.append("FileUpload", file);
            }
            $.ajax({
                type: "POST",
                url: '/Home/Upload',
                data: formData,
                dataType: 'json',
                contentType: false,
                processData: false,
                success: function (response) {
                    alert('succes!!');
                },
                error: function (error) {
                    alert("errror");
                }
            });
        });
    });

</script>
</head>
<body>
    <input type="file" id="FileUpload" multiple />
    <input type="button" id="Upload" value="Upload" />
</body>
</html>

服务器端....

public class HomeController : Controller
{
    [HttpPost]
    public void Upload( )
    {
        for( int i = 0 ; i < Request.Files.Count ; i++ )
        {
            var file = Request.Files[i];

            var fileName = Path.GetFileName( file.FileName );

            var path = Path.Combine( Server.MapPath( "~/Junk/" ) , fileName );
            file.SaveAs( path );    
        }

    }
}

【讨论】：

惊人的工作 - 我已经尝试了几个月才能让它工作。非常感谢！
您的代码成功上传文件，但我总是收到“错误”。我的问题是如何将控制器的响应发送到 ajax 调用？
谢谢。 @shadi1024 返回成功结果更改上传操作方法签名以返回 ActionResult 然后返回 Json 结果，例如return Json(new { result = "some_info" });
伙计，希望我早点遇到这个！互联网上最好的答案！

【解决方案2】：

这篇文章帮助了我：http://www.matlus.com/html5-file-upload-with-progress/ ActionResult 仍然是ActionResult Upload(HttpPostedFileBase file) {...}

【讨论】：

【解决方案3】：

[HttpPost]
    public void Upload( )
    {
        for( int i = 0 ; i < Request.Files.Count ; i++ )
        {
            var file = Request.Files[i];

            var fileName = Path.GetFileName( file.FileName );

            var path = Path.Combine( Server.MapPath( "~/Junk/" ) , fileName );
            file.SaveAs( path );    
        }

    }

【讨论】：