File upload using MVC 4 with Ajax
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 ); } }}
This article helped me out: http://www.matlus.com/html5-file-upload-with-progress/The ActionResult is still ActionResult Upload(HttpPostedFileBase file) {...}
[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 ); } }