Tim's Web Site 2.0

About Me

Miscellaneous

Geek Stuff

Skydiving


My Amazon.com Wish List

Geek Stuff : Tutorials : PHP : File Uploading With PHP

It is pretty easy to add functionality to your web site so your users can upload photos and files. This can be especially useful when creating web based admin tools to manage the content on a web site.

In our tutorial here we will be creating 2 pages, one that contains the form for the user to choose the image and the second that does the uploading and displays a confirmation.

File Uploading Diagram

To begin create files in your web directory for "fileChoose.php" and "fileUpload.php", and then create a subdirectory called "images" where we will be uploading the images.

fileChoose.php

To start we will need to create the web form to choose a file from our local hard drive. For our example here we will be creating an image upload form that will allow a user to choose up to two images from their local hard drive.

<form name="imagesForm" method="post" action="fileUpload.php" enctype="multipart/form-data">
<input type="file" name="imageOne"><br/>
<input type="file" name="imageTwo"><br/>
<input type="submit" value="Upload Images!">
</form>

You'll notice that in addition to the usual "name", "method" and "action" attributes we have also added enctype="multipart/form-data" to the <form> tag. This is important and has to be there for our upload to work.

fileUpload.php

For the upload page we will do some basic error checking to make sure at least one image was uploaded. The comments below explain the code line by line.

<?php
// wrap each image code block in an if() in case one or more are empty
if(!empty($_FILES['imageOne']['name'])) {
   // move image into whatever directory you want
   move_uploaded_file($_FILES['imageOne']['tmp_name'], 
      $_SERVER['DOCUMENT_ROOT'] . "/images/" . $_FILES['imageOne']['name']);

   /*
    * you can put your query for the image (insert, updated, whatever..) here
    * so it will execute *if* there was an image for this one and after move..
    */
}
// you can put as many of these as you need.. or get wild and run a for()
// or while() loop on the $_FILES variable so it can be more flexible
if(!empty($_FILES['imageTwo']['name'])) {
   // move image into whatever directory you want
   move_uploaded_file($_FILES['imageTwo']['tmp_name'], 
      $_SERVER['DOCUMENT_ROOT'] . "/images/" . $_FILES['imageTwo']['name']);

   /*
    * you can put your query for the image (insert, updated, whatever..) here
    * so it will execute *if* there was an image for this one and after move..
    */
}
?>

Basically we're just checking to make sure a file was submitted in the form (it's not empty, or !empty), then we move it into the directory of our choice using the move_uploaded_file() function that's built in to PHP.

As noted in the comments you could also run a SQL statement in each if() block to associate the newly uploaded image with a record in a database if you wanted to.

Display Uploaded Images (optional)

You can also confirm the uploaded images and display them in the "fileUpload.php" page by placing the following PHP code later in the page. It basically places all of the images in the /images directory into <img> tags in the page. The comments explain how the code works line by line.

<?php
// first we open the directory and assign it a file handle
if($imgHandle = opendir($_SERVER['DOCUMENT_ROOT'] . "/images/")) {
   echo "<p>\n";
   // loop through all the files in the directory
   while($image = readdir($imgHandle)) {
      // strip out the directory . and .. directory stuff
      if($image != "." && $image != "..") {
         // then display each image in the directory on the page
         echo "<img src=\"/images/{$image}\" border=\"0\"><br/>\n";
      }
   }
   echo "</p>\n";

   // release the directory handle when we're done with it
   closedir($imgHandle);
}
?>

Told you it wasn't gonna be hard! I hope this was useful to you. =)

©1995 - 2008 Tim Patterson, All Rights Reserved (Unless otherwise noted)