Page 1 of 1

image upload along with text

Posted: Sun Jan 01, 2012 5:44 pm
by Fonis
Hey guys. Since i'm somewhat new to php, i've decided to make a some kind of forum to get a lot of the stuff into my head :) . The problem right now though is that i want to make it possible to upload an image along with the text/topic, and i want the image to be shown "inside" some text.
An example could be like this forum allows you to attach an upload.

I've simply no clue about how to do it, and i couldn't find anything searching (maybe i'm just not good at searching the web?), so could one of you guys please explain to me how to do it?


BTW while i'm at it, how do one create this kind of "toolbar" over the text area, and how do you control what the different buttons do? :?:

Re: image upload along with text

Posted: Mon Jan 02, 2012 1:38 am
by Christopher
First: Do you know how to do uploads?

Re: image upload along with text

Posted: Mon Jan 02, 2012 3:01 am
by internet-solution
Fonis wrote: BTW while i'm at it, how do one create this kind of "toolbar" over the text area, and how do you control what the different buttons do? :?:
Do you mean the text formatting toolbar? This type toolbars are created using javascript. You can add onclick events to different buttons for calling functions when user click them. These functions change the way texts are shown on the page or stored in the database.

You can get off the shelf javascript toolbars - google Javascript WYSIWYG Editor

Re: image upload along with text

Posted: Mon Jan 02, 2012 4:08 am
by Fonis
Christopher: yes i do know how to upload, but i want to know how to let it be shown with text.

Internet-solution: thanks, i'll look into that later :)

Re: image upload along with text

Posted: Mon Jan 02, 2012 9:12 am
by Fonis
If anybody else out there is trying to learn how to create this, i found this tutorial on youtube http://www.youtube.com/watch?v=SSAQK4Nw ... ure=relmfu

Re: image upload along with text

Posted: Thu Jan 05, 2012 12:35 pm
by Fonis
well, here i am back again. I followed the tutorial above, and i want to add some features, but the problem is that i don't know anything about javascript. 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 be able to upload an image 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... ?

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