File upload within page

Question

I need an image upload system within the page so that a user can upload a picture without leaving the profile editing page. Like it does in soundcloud when a user edits their profile. The picture should be uploaded and then should show up on the profile editing page once uploaded. Everything is written in PHP but im guessing some javascript will have to be in there. If there is something already like this that i can just utilize please let me know.

Here is the profile edit code

$username = $_SESSION['username'];
    $pass = $_SESSION['password']; 
  include ("../database.php");
   $result = mysql_query("SELECT * FROM members WHERE username='$username' AND     password='$pass' AND artist='Y'");

while($row = mysql_fetch_array($result)){

$artisturl = mysql_query("SELECT * FROM members  
WHERE username='$username' AND password='$pass'  AND artist='Y'");

while($row = mysql_fetch_array($artisturl)){
echo '<form action="phpscripts/artistupdate.php" method="post">
<input type="text" name="artistname" value="'. $row['artistname'].'" class="name"    maxlength="80"><span id="editlink"><t1>Your profile link will be: <br><a    href="http://newbornsounds.co.uk/artists/artist.php?artist='.$row['artistname'].'">    <b>http://newbornsounds.co.uk/artists/artist.php?artist=<FONT
 style="BACKGROUND-COLOR: yellow">'.$row['artistname'].'</font></b></a></span>
 <br><div id="urlwarn"><t1>Please note that if you change your url all the links you     have placed outside of NBS will be affected.</t1></div>';
}
}
?>
<hr>
<?php 


    $username = $_SESSION['username'];
    $pass = $_SESSION['password']; 
   include ("../database.php");
   $result = mysql_query("SELECT * FROM members WHERE username='$username' AND     password='$pass' AND artist='Y'");

while($row = mysql_fetch_array($result)){

       echo '<div id="artistsbio"><form action="phpscripts/artistupdate.php"    method="post">
       <textarea name="bio" rows="10" cols="80" name="bio" value="'.    $row['bio']. '" class="bio">'. $row['bio']. '</textarea><br>
       <div id="probwarn"><t1>Everything is still in the beta stage so there are bound to be a few problems. If you spot one please <a href="mailto:artists@newbornsounds.co.uk"><b>tell us about it.</b></a></t1></div>

       </div>';

}
?>

<a href="upload.html"><div id="imageright1edit"><img src="<?php  
   include ("../database.php");
   $result = mysql_query("SELECT * FROM members WHERE username='$username' AND     password='$pass' AND artist='Y'");

 while($row = mysql_fetch_array($result)){ echo ''. $row['image1'].''; }?>" width="100%"></a>
<a href="upload.html"><div id="imageright1edit"><img src="<?php  
   include ("../database.php");
   $result = mysql_query("SELECT * FROM members WHERE username='$username' AND    password='$pass' AND artist='Y'");

while($row = mysql_fetch_array($result)){ echo ''. $row['image2'].''; }?>" width="100%"></div></a>

<!-- This is the image upload select box-->
<input type="file" name="imageupload" value="Upload an image" class="filebutton"></div>

<input type="submit" name="submit" value="Done" class="button"></form>

Have a look into AJAX & PHP File Uploads on Google, I think you'll find exactly what you want. — Ben Poulson, Jun 07 '12 at 15:07

score 1 · Accepted Answer · answered Jun 07 '12 at 15:14

1

answered Jun 07 '12 at 15:14

Joyce Babu

19,602
13
62
97

having a slight issue with it. Please help http://stackoverflow.com/questions/10936359/more-than-one-form-on-a-single-page – Jacob Windsor Jun 07 '12 at 16:57

Kenny Cason · Answer 2 · 2012-06-07T15:16:56.013

0

I learned how to do so from this tutorial:

http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop/

It makes use of jQuery's imgAreaSelect image cropping plugin

edited Jun 07 '12 at 15:16

answered Jun 07 '12 at 15:11

Kenny Cason

12,109
11
47
72

I followed this tutorial less than a month ago and got it to work without any problems. If I can think of anything more I'll add it to my answer. – Kenny Cason Jun 07 '12 at 15:14
Im not looking for a cropping tool although i may use this so thanks. Im looking for something that will upload images within the page without loading another page. Thanks anyway – Jacob Windsor Jun 07 '12 at 15:40
Yeah you mentioned editing so I wasn't quite sure what exactly you were looking for. Also almost always there is some form of post cropping after upload :) – Kenny Cason Jun 07 '12 at 15:50
Having a slight issue with it. Please help http://stackoverflow.com/questions/10936359/more-than-one-form-on-a-single-page – Jacob Windsor Jun 07 '12 at 16:56

File upload within page

2 Answers2