使用 MVC 4 和 Ajax 上传文件
Posted
技术标签:
【中文标题】使用 MVC 4 和 Ajax 上传文件【英文标题】：File upload using MVC 4 with 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的可能重复 【参考方案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 );
【讨论】：
以上是关于使用 MVC 4 和 Ajax 上传文件的主要内容，如果未能解决你的问题，请参考以下文章
Spring mvc ajax文件上传导致415（不支持的媒体类型）
html Ajax文件上传（JQuery和ASP.Net MVC）.html
如何使用 ajax 将文件上传到 asp.net mvc 控制器操作