Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: image upload

  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    image upload

    Okay so i followed a tutorial on how to create a wysiwyg rich text editor. The script has a function that makes it possible to take an image uploaded on an another site and use it. What i want though is to let the user upload an image directly into the text editor. Is there a way to do that in javascript? and if so, can you guys please help me write it, cause i can't find anything on the web about it... ?

    btw, is it possible to write a function that allows the user to show a video from youtube just by entering the url address?

    Code:
    <div id="content">
          
    <body onLoad="iFrameOn();">
          
    <h1>Create a New Guide</h1>
    <form id="form1" name="form1" method="post" action="add_guide.php">
    <h3>Guide Name <input name="guide" type="text" id="guide" size="50" maxlength="50" /></h3>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <select name="class">
      <option value="0">None</option>
      <option value="1">Scout</option>
      <option value="2">Soldier</option>
      <option value="3">Pyro</option>
      <option value="4">Demoman</option>
      <option value="5">Heavy</option>
      <option value="6">Engineer</option>
      <option value="7">Medic</option>
      <option value="8">Sniper</option>
      <option value="9"selected="selected">Spy</option>
    </select>
    
    <p>&nbsp;</p>
    
    <div id="wysiwyg_cp" style="padding:8px; width:700px;">
      <input type="button" onClick="iBold()" value="B"> 
      <input type="button" onClick="iUnderline()" value="U">
      <input type="button" onClick="iItalic()" value="I">
      <input type="button" onClick="iFontSize()" value="Text Size">
      <input type="button" onClick="iForeColor()" value="Text Color">
      <input type="button" onClick="iHorizontalRule()" value="HR">
      <input type="button" onClick="iUnorderedList()" value="UL">
      <input type="button" onClick="iOrderedList()" value="OL">
      <input type="button" onClick="iLink()" value="Link">
      <input type="button" onClick="iUnLink()" value="UnLink">
      <input type="button" onClick="iImage()" value="Image">
    </div>
    <!-- Hide(but keep)your normal textarea and place in the iFrame replacement for it -->
    <textarea style="display:none" name="content" cols="50" rows="10" id="content"></textarea>
    <iframe name="richTextField" id="richTextField" style="border:#000000 1px solid; width:700px; height:300px;"></iframe>
    <!-- End replacing your normal textarea -->
    
    
    <p>&nbsp;</p>
    <input type="submit" name="submit" value="Submit" onClick="javascript:submit_form();" />
    
    </form>
    </div>
    Code:
    function iFrameOn(){
    	richTextField.document.designMode = 'On';
    }
    function iBold(){
    	richTextField.document.execCommand('bold',false,null); 
    }
    function iUnderline(){
    	richTextField.document.execCommand('underline',false,null);
    }
    function iItalic(){
    	richTextField.document.execCommand('italic',false,null); 
    }
    function iFontSize(){
    	var size = prompt('Enter a size 1 - 7', '');
    	richTextField.document.execCommand('FontSize',false,size);
    }
    function iForeColor(){
    	var color = prompt('Define a basic color or apply a hexadecimal color code for advanced colors:', '');
    	richTextField.document.execCommand('ForeColor',false,color);
    }
    function iHorizontalRule(){
    	richTextField.document.execCommand('inserthorizontalrule',false,null);
    }
    function iUnorderedList(){
    	richTextField.document.execCommand("InsertOrderedList", false,"newOL");
    }
    function iOrderedList(){
    	richTextField.document.execCommand("InsertUnorderedList", false,"newUL");
    }
    function iLink(){
    	var linkURL = prompt("Enter the URL for this link:", "http://"); 
    	richTextField.document.execCommand("CreateLink", false, linkURL);
    }
    function iUnLink(){
    	richTextField.document.execCommand("Unlink", false, null);
    }
    function iImage(){
    	var imgSrc = prompt('Enter image location', '');
        if(imgSrc != null){
            richTextField.document.execCommand('insertimage', false, imgSrc); 
        }
    }
    function submit_form(){
    	var theForm = document.getElementById("form1");
    	theForm.elements["content"].value = window.frames['richTextField'].document.body.innerHTML;
    	theForm.submit();
    }
    Last edited by fonis; 01-07-2012 at 07:31 PM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,080
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    When posting here please help us to help you by following the posting guidelines and wrapping your code in CODE tags. This means use the octothorpe or # button on the toolbar. You can (and should) edit your previous post.

    JavaScript is purely a client-side language, and unless used with an Ajax call has no capability to read from or write to a file (except a cookie), communicate with the server, access a database, the client's operating system or the Windows registry, or alter the default behaviour of the browser. And for security reasons JavaScript cannot access anything beyond the domain of the current page. This is known as the "same origin policy" and prevents a document or script loaded from one origin from getting or setting properties of a document from a different origin.

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    okay, thanks for the reply. Since i know nothing of ajax, can i somehow make it possible for the user to upload a picture through php, and then insert the picture into a certain place in the iframe?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •