آپلود چندین فایل همزمان با استفاده از پلاگین jQuery در ASP.NET MVC
در این مقاله یک مثال ساده نحوه آپلود چندین فایل با استفاده از پلاگین jQuery در ASP.Net MVC 5 توضیح خواهیم داد.
View
View زیر شامل یک عنصر HTML FileUpload است که روی پلاگین جی کوئری آپدیت شده اعمال خواهد شد.
فایل های مورد نیاز آپلود با استفاده از پلاگین جی کوئری در داخل یک پوشه ای به نام Uploadify درون پروژه قرار می گیرند.
تمام فایل های اسکریپت و CSS مورد نیاز برای پلاگین جی کوئری آپلود در بخش HEAD به قرار داده می شوند و پلاگین جی کوئری Uploadify به عنصر FileUpload HTML اعمال می شود.
ویژگی اسکریپت پلاگین جی کوئری آپلود به روش Index of Home Controller تنظیم شده است .
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
</style>
<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 () {
$("#postedFile").fileUpload({
'uploader': '../Uploadify/uploader.swf',
'cancelImg': '../Uploadify/cancel.png',
'buttonText': 'Browse Files',
'script': '/Home/Index/',
'folder': 'Uploads',
'fileDesc': 'Image Files',
'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
'multi': true,
'auto': true
});
});
</script>
</head>
<body>
<div>
<input type="file" id="postedFile" name="postedFile" />
</div>
</body>
</html>
فضای نام
شما باید نام فضای نام را وارد کنید.
using System.IO;
Controller
Index Action به طور پیش فرض از عملیات GET پشتیبانی می کند و از این رو برای انجام عملیات POST یک ActionResult اضافی ایجاد می کنیم که پارامتری را که مجموعه ای از نوع HttpPostedFileBase است را می پذیرد.
نکته : نام پارامتر HttpPostedFileBase باید همیشه FileData باشد زیرا این نام متغیر توسط افزونه جی کوئری آپلود استفاده می شود.
namespace jQuery_Uploadify_MVC.Controllers
{
public class HomeController : Controller
{
// GET: Home
[HttpGet]
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Index(List<HttpPostedFileBase> FileData)
{
string path = Server.MapPath("~/Uploads/");
foreach (HttpPostedFileBase postedFile in FileData)
{
if (postedFile != null)
{
string fileName = Path.GetFileName(postedFile.FileName);
postedFile.SaveAs(path + fileName);
}
}
return View();
}
}