文件上传使用MVC 4阿贾克斯 [英] File upload using MVC 4 with Ajax
问题描述
我正在开发使用MVC 4+ VS 2012的Web应用程序+ Framwork 4.5。
I am developing web application using MVC 4+ VS 2012+Framwork 4.5.
我有三个部分意见，根据用户的操作而动态渲染，在我的索引页。
I have three partial views, which are rendering dynamically, on my index page based on user action.
共有3部分观点，一种局部视图有上传文件功能包含文本框部分输入字段。
Out of three partial views, one partial view has Upload File functionality with some entry fields like textboxes.
问题：
当用户点击Save按钮（这是在局部视图本身present）。我想保存输入字段到我的数据库和存储上传文件的共享文件夹。
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阿贾克斯的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
