آپلود عکس در ckeditor در MVC 5
0 0

آپلود عکس در ckeditor در MVC 5


آپلود عکس در ckeditor در MVC 5

در این پست نحوه آپلود عکس در ckeditor توسط MVC 5 را آموزش می دهیم.

در پست های قبلی نحوه استفاده از ckeditor در MVC 5 را به صورت کامل توضیح دادیم. در این قسمت جهت کاملتر شدن این آموزش نحوه آپلود عکس در ckeditor را توضیح می دهیم.

در آموزش های بعدی نحوه سفارشی سازی ckeditor رو به صورت کامل آموزش خواهیم داد و همچنین نحوه اضافه کردن syntaxhighlighter به ckeditor رو به صورت کامل توضیح خواهیم داد تا مباحث استفاده از ckeditor در MVC 5 به پایان برسد.

جهت آپلود عکس در ckeditor ابتدا یک پوشه به نام Images در ریشه پروژه خود ایجاد کنید.

سپس در کنترلی که می خواهیم آپلود عکس  انجام شود کدهای زیر را کپی کنید توجه داشته باشید که ما این کار رو در کنترل Home انجام می دهیم.

[HttpPost]
        public ActionResult UploadImage(HttpPostedFileBase upload, string CKEditorFuncNum, string CKEditor, string langCode)
        {
            string vImagePath = String.Empty;
            string vMessage = String.Empty;
            string vFilePath = String.Empty;
            string vOutput = String.Empty;
            try
            {
                if (upload != null && upload.ContentLength > 0)
                {
                    var vFileName = DateTime.Now.ToString("yyyyMMdd-HHMMssff") + Path.GetExtension(upload.FileName).ToLower();
                    var vFolderPath = Server.MapPath("/Images/");
                    if (!Directory.Exists(vFolderPath))
                    {
                        Directory.CreateDirectory(vFolderPath);
                    }
                    vFilePath = Path.Combine(vFolderPath, vFileName);
                    upload.SaveAs(vFilePath);
                    vImagePath = Url.Content("/Images/" + vFileName);
                    vMessage = "تصویر با مفقیت ذخیره شد";
                }
            }
            catch
            {
                vMessage = "There was an issue uploading";
            }
            vOutput = @"<html><body><script>window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ", \"" + vImagePath + "\", \"" + vMessage + "\");</script></body></html>";
            return Content(vOutput);
        }

در کدهای ما یک متد اکش به نام UploadImage تعریف کردیم که تصویر ما رو آپلود می کند.

حال پوشه ckeditor در پوشه Scripts بروید و فایل Config.js را باز کنید و کد زیر را به آن اضافه کنید.

config.filebrowserImageUploadUrl = '/Home/UploadImage';

در کد بالا نام کنترلر و متد آپلود تصویر را مشخص کردیم.

حال برنامه را اجرا کنید و برای آپلود عکس کافیست روی آیکون image در ckeditor کلیک کنید و بعد از انتخاب تصویر روی گزینه به سرور بفرست کلیک کنید. 

آپلود عکس در ckeditor در MVC 5

دانلود

نویسنده حسین فتحی
گروه مطلب MVC
نوع مطلب سورس کد و آموزش
تاریخ انتشار ۲۱ اسفند ۱۳۹۳
منبع ایران گنج
تعداد نظرات ۱
قیمت کاربران VIP
توضیح توجه:
  • زمانی که روی لینک دانلود کلیک می کنید لینک دانلود به مدت 24 ساعت معتبر خواهد بود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

نظر / سوال

Captcha

تعداد نظرات : ۱

  • --

    ممنون. عالی بود

    پاسخ

این صفحه را می‌پسندم