In this article I will explain how to upload image and then display the same in TinyMCE TextBox Editor.
Note: For details on how to use TinyMCE Editors and Uploadify Plugin. Kindly refer
 
Below is the HTML Markup of the Page, where we have the TinyMCE and Uploadify Plugin implemented.
<head runat="server">
    <title></title>
    <link rel="Stylesheet" type="text/css" href="CSS/uploadify.css" />
    <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>
</head>
<body>
    <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>
</body>
</html>
 
Above you will notice that we added the following OnComplete event to the Uploadify Plugin which is raiased when the FileUpload Process is completed.
'onComplete': function (event, ID, fileObj, response, data) {
    var img = "<img style = 'height:80px;width:80px' src = '" + response + "' />";
    tinyMCE.activeEditor.execCommand("mceInsertContent", true, img);
}
 
Here I first create a string of HTML Image where I set the path of the Image file from the response object of the OnComplete event.
Then the HTML string of image is inserted in the TinyMCE Editor, which makes it display as Image.
Note: The code for Upload.ashx in VB.Net and C# is available at Implement TinyMCE Editor in ASP.Net using C# and VB.Net
 
Demo
 
Downloads