www.webdeveloper.com
Results 1 to 3 of 3

Thread: image upload

Hybrid View

  1. #1
    Join Date
    Jan 2012
    Posts
    1

    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?

    [syntax=php]
    <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>
    [/syntax]

    [syntax=php]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();
    }[/syntax]

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    738
    Essentially it seems this script adds images from URLs entered by the user. In order to upload directly to your editor you would need a few things. One of them would be an upload script, which would likely be a PHP or ASP script that handles an upload form. Secondly, you would need a place to store all of the images since you are now handling the uploads yourself rather than linking to existing files on the internet. You may also need some additional scripts to handle/manage the uploaded files.

    As for displaying YouTube videos from only the URL, this can be done using YouTube's new embed code and a simple JavaScript function like so:
    Code:
    function _EmbedVideo($url) {
      var $video = "";
      if($url.indexOf("?") > -1 ) {
        var strQueryString = $url.substr($url.indexOf("?"));
        var aQueryString = strQueryString.split("&");
        for(var iParam = 0; iParam < aQueryString.length; iParam++) {
          if(aQueryString[iParam].indexOf("v=") > -1 ) {
            var aParam = aQueryString[iParam].split("=");
            $video = aParam[1];
            break;
          }
        }
      }
    alert($video);
      var $embed_code = '<iframe width="420" height="315" src="http://www.youtube.com/embed/' + $video + '" 
    
    frameborder="0" allowfullscreen></iframe>';
      return $embed_code;
    }
    Though to integrate this in to your editor you will have to make some adjustments to have it output the proper code to your editor window.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  3. #3
    Join Date
    May 2010
    Posts
    213
    Wait, you mean... You're writing your own wysiwyg editor from scratch? If so, and i don't mean to be a smartass, but why are you doing that?

    As for uploading images, that cannot be executed without server side coding. I'm not sure if you're accidently on the wrong subforum, but you can't actually upload an image with Javascript. That's more of a PHP question. Once you upload it with ASP or PHP and you get the new image URL as a response, your problem will get real trivial real fast.

    Youtube question - Yes, it is. You need to go to any Youtube video and copy the embed code. Then you need to remove the Youtube ID from it. Then you need a user to enter some video URL as you said you'd like them to. Then, you apply a regular expression to extract the video ID from that URL. And finally you insert that ID into the embed code where the ID goes and write that onto the document.
    i love easter eggs
    (if you got any creative easter eggs, send me a PM)

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles