In
this example we explain that how to upload file using jQuery Ajax call in
asp.net MVC.or how to upload files using jQuery Ajax in asp.net MVC Razor.here
we use the Jquery Uploadify plugin to upload the multiple files at a time using
jQuery and Ajax in asp.net MVC.
In
controller we use the HttpPostedFileBase collection as a parameter and get all
files in loop and save to the directory or folder.
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Upload file using jQuery AJAX in ASP.Net MVC
</title>
<link rel="Stylesheet" type="text/css" href="../Uploadify/uploadify.css"/>
<script type="text/javascript" src="../Uploadify/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../Uploadify/jquery.uploadify.js"></script>
<script type="text/javascript">
$(function () {
$("#FileUpload").fileUpload({
'uploader': '../Uploadify/uploader.swf',
'cancelImg': '../Uploadify/cancel.png',
'buttonText': 'Browse Files',
'script': '/employee/Index/',
'folder': 'Uploads',
'fileDesc': 'Image Files',
'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
'multi': true,
'auto': true
});
});
</script>
</head>
<body>
<div>
<input type="file" id="FileUpload" name="FileUpload"/>
</div>
</body>
</html>
Controller:
public class EmployeeController : Controller
{
// GET: Home
[HttpGet]
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Index(List<HttpPostedFileBase> FileData)
{
string path = Server.MapPath("~/Uploads/");
foreach (HttpPostedFileBase FileUpload in FileData)
{
if (FileUpload != null)
{
string fileName = Path.GetFileName(FileUpload.FileName);
FileUpload.SaveAs(path + fileName);
}
}
return View();
}
}
Good post.
ReplyDeleteif someone want to upload file without using Uploadify you can check this
jQuery Ajax File upload in MVC