در این مقاله میخواهیم روش آپلود و ذخیره تصویر در MVC را شرح دهیم. همانطور که میدانید ذخیره تصویر در پایگاه داده باعث سنگینی DB میشود چون ابتدا باید تصویر به Binary تبدیل شود و سپس ذخیره شود قبلا از این روش استفاده میشد در این مقاله ما به جای ذخیره تصویر در پایگاه داده خود آدرس تصویر را که یک رشته می باشد ذخیره میکنیم.

امروز میخواهیم ببینیم چگونه میتوانیم تصاویر خود را در پوشه ذخیره کرده و نام و آدرس آنرا در پایگاه داده نگهداری کنیم.

ابتدا یک پروژه از نوع MVC بسازید روی پروژه کلیک راست کرده و یک پوشه جدید به نام Img اضافه کنید

خوب در این مقاله از روش Database First استفاده میکنیم پس ابتدا باید مدل خود را به پروژه اضافه کنیم قبل از این کار در پایگاه داده یک جدول به نام tbl_details به شکل زیر میسازیم:

حال در برنامه خود روی پوشه Model کلیک راست کرده و گزینه add new item را انتخاب کنیددر قسمت Data گزینه ADO.NET Entity Data Model را انتخاب وروی گزینه Add کلیک کنیددر پنجره بعدی Generate From  DataBase را انتخاب و روی Next کلیک کنید در این صفحه روی NewConnection کلیک کنید سپس نام سرور ،نوع login ودرصورت استفاده از sql server نام کاربری و کلمه عبور را وارد کنید سپس پایگاه داده خود را انتخاب و روی OK کلیک کنید.

از radioButton  ها گزینه yes را انتخاب کنید و در قسمت پایین پنجره گزینه ذخیره رشته اتصال در فایل WebConfig را تیک بزنید.

سپس در پنجره بعدی جدول خود را میتوانید انتخاب کنید :

پس از کلیک روی دکمه Finish جدول ما به ORM همانند شکل زیر اضافه میشود:

خوب پس از اضافه کردن مدل به پروژه خود نوبت به ساختن کنترلر میرسد .روی پوشه Controller کلیک راست کرده و یک کنترلر جدید از نوع Empty به نام Home بسازید و دراینجا تصویر را در پوشه Img ذخیره میکنیم و آدرس تصویر و نام آنرا در جدول خود در پایگاه داده ذخیره میکنیم و یک پیام برای اطلاع رسانی از ذخیره شدن تصویر میدهیم نکته ای که باید به آن توجه شود در  ورودی متد index میباشد که برای دریافت فایل آپلود شده باید جنس آنرا از نوع HttpPostedFileBase درنظر بگیریم و FormCollection هم تمامی عناصر موجود در وی رو به صورت آرایه در اختیار ما قرار می دهد:

    public class HomeController : Controller
    {
        TestDBEntities obj = new TestDBEntities();
        public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public ActionResult Index(FormCollection fc, HttpPostedFileBase file)
        {
            tbl_details tbl = new tbl_details();
            var allowedExtensions = new[] {  
            ".Jpg", ".png", ".jpg", "jpeg"  
        };
            
            tbl.Image_url = file.ToString(); //getting complete url  
            tbl.Name = fc["Name"].ToString();
            var fileName = Path.GetFileName(file.FileName); //getting only file name(ex-ganesh.jpg)  
            var ext = Path.GetExtension(file.FileName); //getting the extension(ex-.jpg)  
            if (allowedExtensions.Contains(ext)) //check what type of extension  
            {
                string name = Path.GetFileNameWithoutExtension(fileName); //getting file name without extension  
                string myfile = name + "_" + tbl.Id + ext; //appending the name with id  
                // store the file inside ~/project folder(Img)  
                var path = Path.Combine(Server.MapPath("~/Img"), myfile);
                tbl.Image_url = path;
                obj.tbl_details.Add(tbl);
                obj.SaveChanges();
                file.SaveAs(path);
                ViewBag.OK = "تصویر با موفقیت ذخیره شد";
            }
            else
            {
                ViewBag.message = "لطفا فقط فایل تصویری انتخاب کنید";
            }
            return View();
        }
    }

حال باید ویو متد index را بسازیم درون متد index کلیک راست کنید و گزینه add view را انتخاب کنید پس از ساخت ویو درون آن یک دکمه و یک textbox برای دریافت نام اضافه میکنیم نکته مهم در قسمت BeginForm میباشد که باید آنرا ویرایش کنید چون در صورت عدم ویرایش در حالت پیش فرض باقی بماند تصویر شما از ویو به کنترلر برده نمیشود پس به ویو نام کنترلر ، نام ویو و متد فرم که باید در حالت post باشد و نوع آن باید مشخص کنیم:

@using (Html.BeginForm("Index", "Home", FormMethod.Post, new
{
    enctype = "multipart/form-data"
}))
{
    <h5>لطفا تصویر را انتخاب کنید</h5>
    <div>
        <img id="user_img"
             height="100"
             width="90"
             style="border:solid" />
    </div>
    <div>
        <input type="file" title="search image" id="file" name="file" onchange="show(this)" /> 
    </div>

    <div>
        نام
    </div>
    <div>
        <input type="text"
               id="txt_name"
               name="Name" />
    </div>
    <div>
        <input type="submit" title="save" value="ذخیره"/>
    </div>
    if (!String.IsNullOrEmpty(ViewBag.OK))
    {
        <div class="alert-success">
            @ViewBag.OK
        </div>
    }

}

برای نمایش تصویر انتخاب شده از اسکریپت زیر در ویو خود استفاده میکنیم:

<script type="text/javascript">
    function show(input) {
        if (input.files && input.files[0]) {
            var filerdr = new FileReader();
            filerdr.onload = function (e) {
                $('#user_img').attr('src', e.target.result);
            }
            filerdr.readAsDataURL(input.files[0]);
        }
    }
</script>

حال میتوانید برنامه را اجرا کنید پس از انتخاب تصویر ، تصویر برای شما نمایش داده میشود سپس نام را وارد کنید و زمانی که روی دکمه ذخیره کلیک میکنیم تصویر در پوشه img ذخیره میشود و آدرس تصویر و نام وارد شده در جدول در پایگاه داده ذخیره میشود.