image upload along with text

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

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

image upload along with text

Post 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? :?:
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: image upload along with text

Post by Christopher »

First: Do you know how to do uploads?
(#10850)
internet-solution
Forum Contributor
Posts: 220
Joined: Thu May 27, 2010 6:27 am
Location: UK

Re: image upload along with text

Post 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
Fonis
Forum Newbie
Posts: 24
Joined: Thu Dec 08, 2011 11:20 am

Re: image upload along with text

Post 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 :)
Fonis
Forum Newbie
Posts: 24
Joined: Thu Dec 08, 2011 11:20 am

Re: image upload along with text

Post 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
Fonis
Forum Newbie
Posts: 24
Joined: Thu Dec 08, 2011 11:20 am

Re: image upload along with text

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