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

بارگذاری ، افزودن و نمایش تصویر در TinyMCE Editor TextBox با استفاده از پلاگین jQuery Uploadify در ASP.Net
0 0
بارگذاری ، افزودن و نمایش تصویر در TinyMCE Editor TextBox با استفاده از پلاگین jQuery Uploadify در ASP.Net

 با سلام در این مقاله با یک مثال چگونه بارگذاری و نمایش تصویر در TinyMCE Editor TextBox با استفاده از jQuery در ASP.Net را توضیح می دهیم .
فایل های تصویر با استفاده از AJAX با کمک افزونه jQuery Uploadify در TinyMCE Editor TextBoxآپلود می شوند.
کد HTML
کد HTML از یک FileUpload و یک TextBox چند خطه تشکیل شده است.

<form id="form1" runat="server">
<div style="padding: 40px">
    <asp:FileUpload ID="FileUpload1" runat="server" /><br />
    <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine"></asp:TextBox>
</div>
</form>

پیاده سازی پلاگین TinyMCE و آپلود مجدد
در رویداد jQuery document ready ، کنترل FileUpload با پلاگین jQuery Uploadify اعمال شده است و TextBox Multi-line با پلاگین TinyMCE Rich Text Editor اختصاص داده شده است.
پس از اتمام فرآیند آپلود فایل ، رویداد OnComplete از افزونه jQuery Uploadify ایجاد می شود و از این رو در داخل برنامه مربوط به رویداد OnComplete ، رشته ای از HTML Image با ویژگی تنظیم شده SRC در مسیر فایل آپلود شده تصویر ایجاد می شود.
سرانجام رشته تولید شده HTML Image در ویرایشگر TinyMCE ایجاد شده است.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.uploadify.js"></script>
<script type="text/javascript" src="jscripts/tiny_mce/jquery.tinymce.js"></script>
<script type="text/javascript">
    $(function () {
        $('textarea').tinymce({
            script_url: 'jscripts/tiny_mce/tiny_mce.js',
            theme: "advanced",
            plugins: "spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
            theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect,spellchecker",
            theme_advanced_buttons2: "",
            theme_advanced_buttons3: "",
            theme_advanced_buttons4: "",
            theme_advanced_toolbar_location: "top",
            theme_advanced_toolbar_align: "left",
            theme_advanced_statusbar_location: "bottom",
            theme_advanced_resizing: true,
            height: 200,
            skin: "o2k7",
            skin_variant: "silver"
        });
        $("[id*=FileUpload1]").fileUpload({
            'uploader': 'scripts/uploader.swf',
            'cancelImg': 'images/cancel.png',
            'buttonText': 'Browse Files',
            'script': 'Upload.ashx',
            '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 = '" + fileObj.filePath + "' />";
                tinyMCE.activeEditor.execCommand("mceInsertContent", true, img);
            }
        });
    });
</script>

Handler Genericبرای آپلود فایل های تصویری
General HTTP Handler Generic زیر درخواست های آپلود فایل ارسال شده از پلاگین jQuery Uploadify را کنترل می کند .
ابتدا داده های فایل را خوانده و سپس در پوشه (فهرست) در دیسک سرور ذخیره می کند.
سرانجام ، یک StatusCode 200 در پاسخ ارسال می کند که نشان می دهد فایل با موفقیت آپلود شده است.
C #

<%@ WebHandler Language="C#" Class="Upload" %>
 
using System;
using System.Web;
using System.IO;
 
public class Upload : IHttpHandler {
   
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        context.Response.Expires = -1;
        try
        {
            HttpPostedFile postedFile = context.Request.Files["Filedata"];
           
            string savepath = "";
            string tempPath = "";
            tempPath = System.Configuration.ConfigurationManager.AppSettings["FolderPath"];
            savepath = context.Server.MapPath(tempPath);
            string filename = postedFile.FileName;
            if (!Directory.Exists(savepath))
                Directory.CreateDirectory(savepath);
 
            postedFile.SaveAs(savepath + @"\" + filename);
            context.Response.Write(tempPath + "/" + filename);
            context.Response.StatusCode = 200;
        }
        catch (Exception ex)
        {
            context.Response.Write("Error: " + ex.Message);
        }
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }
}

VB.Net

<%@ WebHandler Language="VB" Class="Upload" %>
 
Imports System
Imports System.Web
Imports System.IO
 
Public Class Upload : Implements IHttpHandler
   
    Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
        context.Response.ContentType = "text/plain"
        context.Response.Expires = -1
        Try
            Dim postedFile As HttpPostedFile = context.Request.Files("Filedata")
            Dim savepath As String = ""
            Dim tempPath As String = ""
            tempPath = System.Configuration.ConfigurationManager.AppSettings("FolderPath")
            savepath = context.Server.MapPath(tempPath)
            Dim filename As String = postedFile.FileName
            If Not Directory.Exists(savepath) Then
                Directory.CreateDirectory(savepath)
            End If
           
            postedFile.SaveAs((savepath + ("\" + filename)))
            context.Response.Write((tempPath + ("/" + filename)))
            context.Response.StatusCode = 200
        Catch ex As Exception
            context.Response.Write("Error: " + ex.Message)
        End Try
    End Sub
   
    Public ReadOnly Property IsReusable As Boolean Implements IHttpHandler.IsReusable
        Get
            Return False
        End Get
    End Property
End Class

 


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

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