upload image

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Fonis
Forum Newbie
Posts: 24
Joined: Thu Dec 08, 2011 11:20 am

upload image

Post by Fonis »

Okay so i followed a tutorial on how to create a 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 on my site and use it instead. 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: Select all

<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: Select all

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();
}
Post Reply