Upload/View Images and Captions

[Salchester]

Hi Folks,

Using PHP, how do you store an image onto the server, along with a short image caption, via a web page......

then via another page, load all the images and captions previously uploaded to the server onto the page?

Many Thanks,

[redhead]

I store only the image, then have a "on the fly" scaling of the image, according to if the viewer wants to see a thumbnail, or wants to see 50% or full scale.

On how to upload the image, take a look at the Troublesome image upload thread, from that I build this small script

PHP Code:

if(isset($_FILES['fn']['tmp_name']))
{ /* opload and add image to database */
  $format = strtolower(substr(strrchr($_FILES['fn']['type'],"/"),1));
    if($format != "jpeg" && $format != "gif"  &&
       $format != "png"  && $format != "bmp")
         $message = "Unacceptable image type: " .$_FILES['fn']['type'];
     else
     {  /* upload image */
        $filename = date("U") . "." .$format;
        if(move_uploaded_file($_FILES['fn']['tmp_name'], "../images/" .$filename))
          if(mysql_query("INSERT INTO images (person_id, name) VALUES (\"".$_POST['person_id']."\", \"".$filename."\")", $DB_LINK))
            $message = "Image has been stored: $filename";
          else
            $message = "Couldn't store image to database";
        else
          $message = "Couldn't upload image: ".$_FILES['fn']['name'];
     }
} 


Then for viewing I read an awful lot on php.net about image mengeling untill I came up with this small script, whis is stored in show_image.php:

PHP Code:

<?php
function resize($filename, $width, $height)
{
  $format = strtolower(substr(strrchr($filename,"."),1));
  switch($format)
  {
   case 'gif' :
   $type ="gif";
   $img = imagecreatefromgif($filename);
   break;
   case 'png' :
   $type ="png";
   $img = imagecreatefrompng($filename);
   break;
   case 'jpg' :
   $type ="jpg";
   $img = imagecreatefromjpeg($filename);
   break;
   case 'jpeg' :
   $type ="jpg";
   $img = imagecreatefromjpeg($filename);
   break;
   default :
   die ("ERROR; UNSUPPORTED IMAGE TYPE");
   break;
  }

  list($org_width, $org_height) = getimagesize($filename);
  $xoffset = 0;
  $yoffset = 0;
  if ($org_width / $width > $org_height/ $height)
  {
     $xtmp = $org_width;
     $xratio = 1-((($org_width/$org_height)-($width/$height))/2);
     $org_width = $org_width * $xratio;
     $xoffset = ($xtmp - $org_width)/2;
  }
  elseif ($org_height/ $height > $org_width / $width)
  {
     $ytmp = $org_height;
     $yratio = 1-((($width/$height)-($org_width/$org_height))/2);
     $org_height = $org_height * $yratio;
     $yoffset = ($ytmp - $org_height)/2;
  }
 

  $img_n=imagecreatetruecolor ($width, $height);
  imagecopyresampled($img_n, $img, 0, 0, $xoffset, $yoffset, $width, $height, $org_width, $org_height);

  if($type=="gif")
  {
   header('Content-type: image/gif');
   imagegif($img_n);
  }
  elseif($type=="jpg")
  {
   header('Content-type: image/jpeg');
   imagejpeg($img_n);
  }
  elseif($type=="png")
  {
   header('Content-type: image/png');
   imagepng($img_n);
  }
  elseif($type=="bmp")
  {
   header('Content-type: image/bmp');
   imagewbmp($img_n);
  }
  Return true;
}

if(isset($_GET['fn']))
{
   if(isset($_GET['h']))
     $n_height = $_GET['h'];
   else
     $n_height = 75;
   if(isset($_GET['w']))
     $n_width = $_GET['w'];
   else
     $n_width = 100;
   resize("../images/".$_GET['fn'], $n_width, $n_height);
}
?>

Which is beeing called like:

<img src="show_image.php?fn=image.ext&h=height&w=width">

[sde]

hi salch,

redhead has some good code in there for managing images but i would only use something like that if i needed to maintain a high resolution of the original image. if you are building something for Susie Q. to upload images from her 3.2 mega-pixel camera, you may not want to store the huge image on the file system if they are never going to be viewed or downloaded at that high resolution. in that case i would resize the image at the time you upload the file

there's many ways to do what you want to do but ultimately it comes down to how you would like to store the images, captions, and if you would like to re-size the images.

it is possible to store images in a database, but i discourage that since it is difficult to manage them. if you wanted to utlilize a database so you could neatly store title, caption, date, or other information about the image, i would create a database table with an auto-increment field for an image id and then name the image in the file system with the unique id from its row.

another option would be to store the caption of an image in a plain text file. you would need to read the text file with php, so maybe make a tab-delimited file with the image name followed by a tab, then the caption. each image would be on a new line. with a little parsing, you could create a php array keyed by the image name and easily display the title for each image.

as far as viewing the images, you could simply read the contents of the directory and maybe use logic like this to display them in a neatly formatted table with x number of columns.

you basically need logic to do these 3 things:

1 - upload
2 - resize/sample
3 - read directory or database for viewing

if you give more detailed information about the project, or some examples of code you're starting with, you could probably get answers that are more specific for your situation.

[DJMaze]

don't forget to validate with:

$_FILES['name']['error']
getimagesize
fileinfo

[Salchester]

Hi Everyone,

First of all, how do you upload the files to the server, as the code from REDHEAD, does't seem to be working.

I am using Xammp Appache Server, how come the images upload does't appear in the htdocs folder?

Many Thanks,

PHP Code:

if(isset($_FILES['fn']['tmp_name']))
{ /* opload and add image to database */
  $format = strtolower(substr(strrchr($_FILES['fn']['type'],"/"),1));
    if($format != "jpeg" && $format != "gif"  &&
       $format != "png"  && $format != "bmp")
         $message = "Unacceptable image type: " .$_FILES['fn']['type'];
     else
     {  /* upload image */
        $filename = date("U") . "." .$format;
        if(move_uploaded_file($_FILES['fn']['tmp_name'], "../images/" .$filename))
          if(mysql_query("INSERT INTO images (person_id, name) VALUES (\"".$_POST['person_id']."\", \"".$filename."\")", $DB_LINK))
            $message = "Image has been stored: $filename";
          else
            $message = "Couldn't store image to database";
        else
          $message = "Couldn't upload image: ".$_FILES['fn']['name'];
     }
} 


[DJMaze]

where's your html form code?

[Salchester]

Here

PHP Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<form name="form1" enctype="multipart/form-data" method="post" action="Save.php">
  <input type="file" name="file">
  <input type="submit" name="Submit" value="Submit">
</form>
</body>
</html> 


[DJMaze]

$_FILES['fn']
vs
name="file"

now you go figure out the difference

[redhead]

Then change the fn in my code, to be file since you call that input field file.
At the same time you can remove the

PHP Code:

          if(mysql_query("INSERT INTO images (person_id, name) VALUES (\"".$_POST['person_id']."\", \"".$filename."\")", $DB_LINK))
            $message = "Image has been stored: $filename";
          else
            $message = "Couldn't store image to database"; 


part, since you're not adding anything to a database, you're simply uploading the image..

Also make sure the "../images/" reference I have in mine is according to where you plan on locating the images.

And please bear in mind, mine will rename the image files to current seconds since 1970, in order to assure theres no two images stored under the same name.

Altho this all seems to me, like you're just taking whatever code beeing shown, without thinking how it will fit your usage...

[Salchester]

Yes, I will also be storing items in a database, as i'm trying to build a simple PHP Photo Gallery, that uses a kind of "Back Office" so that more photos + captions etc can easily be added.

This Back Office will also need to be password protected!!

Many Thanks,

[Salchester]

Iv'e came up with the following code, but how i tell it to save in the root directory, As at the moment, i have got a clue on when the files are put upon uploading them?

HTML

<html>
<body>

<form action="upload_file.php" method="post"
enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" id="file" /> 
<br />
<input type="submit" name="submit" value="Submit" />
</form>

</body>
</html>

PHP

PHP Code:

<?php
if (($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/pjpeg")
&& ($_FILES["file"]["size"] < 20000))
  {
  if ($_FILES["file"]["error"] > 0)
    {
    echo "Return Code: " . $_FILES["file"]["error"] . "<br />";
    }
  else
    {
    echo "Upload: " . $_FILES["file"]["name"] . "<br />";
    echo "Type: " . $_FILES["file"]["type"] . "<br />";
    echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />";
    echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br />";

    if (file_exists("upload/" . $_FILES["file"]["name"]))
      {
      echo $_FILES["file"]["name"] . " already exists. ";
      }
    else
      {
      move_uploaded_file($_FILES["file"]["tmp_name"],
      "upload/" . $_FILES["file"]["name"]);
      echo "Stored in: " . "upload/" . $_FILES["file"]["name"];
      }
    }
  }
else
  {
  echo "Invalid file";
  }
?>

Many Thanks,

[DJMaze]

OK you are heavily going on a dangerous route.
Please, before ever starting to use an upload script learn about security

One bad move is easily done here and then your whole website is down the drain and your host will suspend your hosting account, so i advice you to learn something or use one of the better galleries instead (coppermine or menalto egallery).

Don't ask me why, google should provide loads of pages regarding security issues with uploads to a public path.

[Salchester]

That's ok, i'll sort out the security bits later, just want to see if i can get it sort of working.

What next? How come the PHP, and HTML code i posted previously does work? it doesn't seem to post it in the root folder?

Many Thanks,

[DJMaze]

Now here's where you need security issues regarding chmod 777