我正在使用MVC 4 + VS 2012 + Framework 4.5开发Web应用程序。
我的首页有三个动态呈现的局部视图，根据用户操作进行渲染。
其中一个局部视图具有“上传文件”功能，并带有一些条目字段，如文本框。
问题：
当用户点击保存按钮（该按钮位于局部视图上）时，我想将条目字段保存到我的数据库中，并将已上传的文件存储在共享文件夹中。
我想使用Ajax实现此操作（上传文件并保存数据后，用户应保持在同一视图中）。
我该如何实施相同的操作？ JQuery解决方案可以。
我尝试过@Ajax.BeginForm，但在上传文件后，会发生完整的提交。
这是我的小型工作示例，它可以上传多个文件并将它们上传到名为“junk”的文件夹中。
客户端部分....
<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>
服务器端 (Server Side)....
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 );
}
}
}
这篇文章帮了我很大的忙: http://www.matlus.com/html5-file-upload-with-progress/
ActionResult 仍然是 ActionResult Upload(HttpPostedFileBase file) {...}
[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 );
}
}