توضیحات و دانلود

آپلود، اضافه كردن و نمایش تصویر در TinyMCE Rich Text Editor با استفاده از jQuery
0 0
آپلود، اضافه كردن و نمایش تصویر در TinyMCE Rich Text Editor با استفاده از jQuery

در این مقاله با مثال توضیح خواهیم داد كه چگونه میتوان با استفاده از پلاگین jQuery Uploadify Plugin فایل را آپلود كرد و در TinyMCE Rich Text Editor TextBox بوسیله  ASP.Net MVC Razorنمایش داد.

فایل های آپلود شده با استفاده از پلاگین جی كوئری jQuery Uploadify  در پوشه (دایركتوری) ذخیره می شود و در TextBox Editor Rich Text Editor در ASP.Net MVC Razor نمایش داده می شود.

ابتدا فضای نام زیر رال اضافه كنید.

Namespaces

using System.IO;

 Controller

controller  شامل سه روش عمل است.

 عملیات GET

در داخل این روش ، به سادگی View بازگردانده می شود.

عملیات POST

در داخل این روش ، مقدار ارسال شده از TinyMCE RichTextBox گرفته و سپس در یك متغیر ViewBag قرا داده میشود.

روش POST برای اداره عملیات وآپلود فایل

در داخل این روش ، پارامتر را كه مجموعه ای از نوع HttpPostedFileBase است را می پذیرد.

یك حلقه بر روی مجموعه HttpPostedFileBase اجرا می شود و یك به یك هر فایل تصویر به دایركتوری (پوشه) ذخیره میكند.

در نهایت URL نسبی فایل تصویر در View نمایش داده می شود. این URL برای نمایش فایل تصویر آپلود شده در  Rich Text Editor TinyMCE استفاده می شود .

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
 
    [HttpPost]
    [ValidateInput(false)]
    public ActionResult Index(string richText)
    {
        ViewBag.RichText = richText;
        return View();
    }
 
    [HttpPost]
    public ContentResult Upload(List<HttpPostedFileBase> FileData)
    {
        string fileName = "";
        string path = "~/Uploads/";
        foreach (HttpPostedFileBase postedFile in FileData)
        {
            if (postedFile != null)
            {
                fileName = Path.GetFileName(postedFile.FileName);
                postedFile.SaveAs(Server.MapPath(path) + fileName);
            }
        }
 
        return Content(Url.Content(path + fileName));
    }
}

View

View شامل یك فرم HTML است كه با استفاده از روش Html.BeginForm با پارامترهای زیر ایجاد شده است.

ActionName - نام اكشن در این مورد نام Index است.

ControllerName - نام كنترل كننده در این مورد Home است.

FormMethod - روش فرم را یعنی GET یا POST مشخص می كند. در این مورد به POST تنظیم خواهد شد.

فرم شامل یك عنصر HTML FileUpload، TextArea و دكمه ارسال است.

فایل های مورد نیاز پلاگین jQuery Uploadify در داخل یك پوشه به نام Uploadify درون پروژه قرار می گیرند.

jQuery Uploadify رویرعنصر HTML FileUpload اعمال می شود.

ویژگی اسكریپت پلاگین jQuery Uploadify به روش اكشن آپلود صفحه اصلی تنظیم شده است .

افزونه TinyMCE روی عنصر TextArea HTML اعمال شده است.

پس از ارسال فرم، مقدار ارسال شده  Rich Text Editor TinyMCE با استفاده از متغیر ViewBag نمایش داده می شود .

 

@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {
        <input type="file" id="postedFile" name="postedFile"/>
        @Html.TextArea("RichText")
        <br/>
        <input type="submit" value="Submit"/>
    }
    <hr/>
    <span>@Html.Raw(ViewBag.RichText)</span>
    <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" src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#postedFile").fileUpload({
                'uploader': '../Uploadify/uploader.swf',
                'cancelImg': '../Uploadify/cancel.png',
                'buttonText': 'Browse Files',
                'script': '/Home/Upload/',
                'folder': 'Uploads',
                'fileDesc': 'Image Files',
                'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
                'multi': true,
                'auto': true,
                'onComplete': function (event, ID, fileObj, response, data) {
                    var img = "<img style = 'height:80px;width:80px' src = '" + response + "' />";
                    tinyMCE.activeEditor.execCommand("mceInsertContent", true, img);
                }
            });
            tinymce.init({ selector: 'textarea', width: 500 });
        });
    </script>
</body>
</html>


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :