آپلود چند فایل به صورت همزمان در MVC

در این مقاله میخواهیم با استفاده از خاصیت file در Html امکان آپلود چند فایل به صورت همزمان را در تکنولوژی MVC آموزش دهیم

آپلود چند فایل به صورت همزمان در MVC

یکی از مشکلاتی که در برنامه های واقعی پیش می آید عدم  استفاده از کامپونت در برنامه است برای استفاده از آپلود چند فایل به صورت همزمان میتوان از کامپونت TELERIK  استفاده کنیم ولی ما قصد داریم در این آموزش بدون استفاده از  هیچ کامپونتی به آپلود هزمان چند فایل بپردازیم

برای شروع یک پروژه از نوع MVC  ایجاد میکنیم

حال روی Model راست کلیک کرده و یک class  به نام Person  ایجاد میکنیم

حال  یک فیلد از جنس  IEnumerable  با ورودی HttpPostedFileBase ایجاد کرده ایم

public class Person
    {
        public IEnumerable<HttpPostedFileBase> Files { get; set; }



    }
 
 

 

حال یک کنترلر به نام Home  ایجاد میکنیم و کد های زیر را برای ذخیره عکس در آن  مینویسیم

public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Index(Person p)
        {

            foreach (var file in p.Files)
            {
                if (file.ContentLength > 0)
                {
                    var Imag = file.FileName;
                    file.SaveAs(Server.MapPath("/Image/" + Imag));
                }
            }


            return RedirectToAction("Index");
        }

 

همان طور که مشاهده از یک حلقه foreach   برای انتخاب چند فایل استفاده میکنیم حال روی متد index راست کلیک کرده و یک View برای نمایش فایل آپلود استفاده و ذخیره آن  استفاده میکنیم  فقط این نکنه را خاطر نشان کنم که برای ذخیره عکس ها  یک فولدر Image  در پروزه ایجاد میکنیم

@model WebApplication1.Models.Person
@using (Html.BeginForm(null, null, FormMethod.Post, new { encType = "multipart/form-data" }))
{
    <body dir="rtl">
        <table style="margin-top: 50px;direction: rtl; border:1px solid green">
            <tr>
                <td>فایل </td>
                <td><input type="file" name="Files" id="Files" multiple /></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td><input type="submit" name="submit" value="ذخیره " /></td>
            </tr>
        </table>

    </body>
}

 

فقط این نکته را یادآوری کنم که در input خاصیت multiple را فعال کنید

 

حال از برنامه اجرا بگیرید

 

پس   از انتخاب فایل آپلود میتوانید چند عکس را به صورت همزمان آپلود کنیم

فایل های ضمیمه
دانلود نسخه ی PDF این مطلب