File upload using MVC 4 with Ajax
ajax, asp.net-mvc, asp.net-mvc-4, jquery
Solution
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 );
}
}
}
Problem
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. 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). How can I implement the same? JQuery solution would be fine. I have tried with `@Ajax.BeginForm` but after uploading of file, full post back happen.