Menu
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.
626
File upload is not possible through AJAX. You can upload file, without refreshing page by using IFrame .
The MVC Framework contains built-in support for unobtrusive Ajax. You can use the helper methods to define your Ajax features without adding a code throughout all the views. This feature in MVC is based on the jQuery features. To enable the unobtrusive AJAX support in the MVC application, open the Web.
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 );
}
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
