使用 MVC 4 和 Ajax 上传文件 [英] File upload using MVC 4 with Ajax
问题描述
我正在使用 MVC 4 + VS 2012 + Framework 4.5 开发 Web 应用程序.
I am developing web application using MVC 4 + VS 2012 + Framework 4.5.
我的索引页上有三个局部视图，它们根据用户操作动态呈现.
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 File functionality with some entry fields like textboxes.
问题:
当用户点击保存按钮(它出现在局部视图本身上)时.我想将输入字段保存到我的数据库中，并将上传的文件存储在共享文件夹中.
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.
我想使用 Ajax 实现这个(上传文件并保存数据后，用户应该在同一个视图中).
I want to implement this using Ajax (After uploading the file and save data, user should be on the same view).
我该如何实现?JQuery 解决方案会很好.
How can I implement the same? JQuery solution would be fine.
我尝试过使用 @Ajax.BeginForm 但上传文件后，会发生完整的回传.
I have tried with @Ajax.BeginForm but after uploading of file, full post back happen.
推荐答案
这是我的小型工作示例，它上传多个文件并上传到名为垃圾"的文件夹中
Here is my small working sample, which uploads multiple files and uploads in a folder called as '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>
服务器端....
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 );
}
}
}
这篇关于使用 MVC 4 和 Ajax 上传文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
