In this article I will explain with an example, how to upload and display Image in TinyMCE Editor TextBox using jQuery in ASP.Net.
The Image files will be uploaded in the TinyMCE Editor TextBox using AJAX with the help of jQuery Uploadify plugin.
HTML Markup
Following HTML Markup consists of an ASP.Net FileUpload and a Multi-line 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>
Implementing TinyMCE And Uploadify Plugin
Inside the jQuery document ready event handler, the FileUpload control has been applied with the jQuery Uploadify plugin and the Multi-line TextBox has been assigned with the TinyMCE Rich Text Editor plugin.
The OnComplete event handler of the jQuery Uploadify plugin is raised when the file upload process has been completed and hence inside the OnComplete event handler, a string of HTML Image with the SRC attribute set to the path of the uploaded Image file is generated.
Note: For more details on implementing and using the jQuery Uploadify plugin, please refer Implement Uploadify jQuery Plugin in ASP.Net using C# and VB.Net.
Finally the generated HTML Image string is inserted in the TinyMCE Editor.
<script type="text/javascript" src=""></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 () {
            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"
            '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);
Generic Handler for uploading Image files
The following Generic HTTP Handler handles the File Upload requests sent from the jQuery Uploadify Plugin.
It first reads the File data and then saves is to a Folder (Directory) on the Server’s disk.
Finally it sends a StatusCode 200 in Response which signifies that the File has been successfully uploaded.
<%@ 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;
            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))
            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;
<%@ 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
            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
            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
            Return False
        End Get
    End Property
End Class