jQuery 使用 MVC 4 和 Ajax 上传文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20420828/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
File upload using MVC 4 with Ajax
提问by sanjay jadam
I am developing web application using MVC 4 + VS 2012 + Framework 4.5.
我正在使用 MVC 4 + VS 2012 + Framework 4.5 开发 Web 应用程序。
I have three partial views, which are rendering dynamically, on my index page based on user action.
我有三个部分视图，它们根据用户操作在我的索引页面上动态呈现。
Out of three partial views, one partial view has Upload Filefunctionality with some entry fields like textboxes.
在三个局部视图中，一个局部视图具有Upload File一些输入字段（如文本框）的功能。
Problem:
问题：
When user click on save button (which is present on the partial view itself). I want to save entry field into my database and stored uploaded file on shared folder.
当用户点击保存按钮（它出现在局部视图本身上）时。我想将输入字段保存到我的数据库中，并将上传的文件存储在共享文件夹中。
I want to implement this using Ajax (After uploading the file and save data, user should be on the same view).
我想使用 Ajax 实现这个（上传文件并保存数据后，用户应该在同一个视图中）。
How can I implement the same? JQuery solution would be fine.
我该如何实施？JQuery 解决方案会很好。
I have tried with @Ajax.BeginFormbut after uploading of file, full post back happen.
我尝试过，@Ajax.BeginForm但在上传文件后，会发生完整的回传。
回答by Uthaiah
Here is my small working sample, which uploads multiple files and uploads in a folder called as 'junk'
这是我的小型工作示例，它上传多个文件并上传到名为“垃圾”的文件夹中
Client Side....
客户端....
<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 );
}
}
}
回答by Marthijn
This article helped me out: http://www.matlus.com/html5-file-upload-with-progress/The ActionResult is still ActionResult Upload(HttpPostedFileBase file) {...}
这篇文章帮了我：http: //www.matlus.com/html5-file-upload-with-progress/ActionResult 仍然是ActionResult Upload(HttpPostedFileBase file) {...}
回答by samir
[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 );
}
}
