Upload images through a simple form

This tutorial will show you how to upload an image and give it a name in a simple form, first you'll need a database table to store the title and path to the image, create the following structure in phpmyadmin:

CREATE TABLE `images` (
`itemID` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`itemTitle` VARCHAR( 255 ) NOT NULL ,
`itemPath` VARCHAR( 255 ) NOT NULL
) ENGINE = MYISAM ;

Next connect to your database:

//connect to your database here.
// db properties
define('DBHOST','localhost');
define('DBUSER','database username');
define('DBPASS','password');
define('DBNAME','database name');

// make a connection to mysql here
$conn = mysql_connect (DBHOST, DBUSER, DBPASS);
$conn = mysql_select_db (DBNAME);
if(!$conn){
    die( "Sorry! There seems to be a problem connecting to our database.");
}

Check to see if the form has been submitted if so then run the code.

// if form submitted then process form
if (isset($_POST['sub'])){

Check the lengh if the title, if to small or to long generate an error which we will print out later.

// check fields are not empty
$imgTitle = trim($_POST['imgTitle']);
if (strlen($imgTitle) < 1 || strlen($imgTitle) > 255) {
$error[] = 'Title must be at between 1 and 255 characters.';
}

Set a path to store images in:

// location where initial upload will be moved to
$target = "images/" . $_FILES['uploaded']['name'];

Next move the uploaded image from the tmp directory to your chosen destination only if the image is a .gif,.png or ,jpg.

// find the type of image
switch ($_FILES["uploaded"]["type"]) {
case $_FILES["uploaded"]["type"] == "image/gif":
    move_uploaded_file($_FILES["uploaded"]["tmp_name"],$target);
    break;
case $_FILES["uploaded"]["type"] == "image/jpeg":
       move_uploaded_file($_FILES["uploaded"]["tmp_name"],$target);
    break;
case $_FILES["uploaded"]["type"] == "image/pjpeg":
       move_uploaded_file($_FILES["uploaded"]["tmp_name"],$target);
    break;
case $_FILES["uploaded"]["type"] == "image/png":
    move_uploaded_file($_FILES["uploaded"]["tmp_name"],$target);
    break;
case $_FILES["uploaded"]["type"] == "image/x-png":
    move_uploaded_file($_FILES["uploaded"]["tmp_name"],$target);
    break;

default:
    $error[] = 'Wrong image type selected. Only JPG, PNG or GIF accepted!.';
}

If validation is okay then carry on.

if (!$error) {

Next get the title from the form and remove any tags and make it safe for database entry:

 // post form data
 $imgTitle   = $_POST['imgTitle'];

//strip any tags from input
$imgTitle   = strip_tags($imgTitle);

 // remove any harmful code and stop sql injection
 $imgTitle = mysql_real_escape_string($imgTitle);

Next insert the title and image path into the database, show a sucess message and close the 2 if statements.

    // insert data into images table
    $query = mysql_query("INSERT INTO images (itemTitle, itemPath) VALUES ('$imgTitle', '$target')")or die ('Cannot add image because: '. mysql_error());

    // show a message to confirm results
    echo 'Image Added';

}
}

Display any errors:

if (!empty($error))
{
        $i = 0;
        echo "<p><span class='error'>";
        while ($i < count($error)){
        echo $error[$i].'<br />';
        $i ++;}
        echo "</span></p>";
}

Finally the form itself make sure the form has enctype="multipart/form-data" or no upload will happen.

<form enctype="multipart/form-data" action="" method="post">
<p><label>Title:</label> <input name="imgTitle" type="text" size="40" value="<?php if (isset($error)){ echo $imgTitle; }?>" /></p>
<p><label>Image:</label><input name="uploaded" class="text-input" type="file" maxlength="20" value="" /></p>
<p><input type="submit" name="sub" class="button" value="Add Image"></p>
</form>

Here's the full script:

<?php
//connect to your database here.
// db properties
define('DBHOST','localhost');
define('DBUSER','database username');
define('DBPASS','password');
define('DBNAME','database name');

// make a connection to mysql here
$conn = mysql_connect (DBHOST, DBUSER, DBPASS);
$conn = mysql_select_db (DBNAME);
if(!$conn){
    die( "Sorry! There seems to be a problem connecting to our database.");
}

// if form submitted then process form
if (isset($_POST['sub'])){

// check fields are not empty
$imgTitle = trim($_POST['imgTitle']);
if (strlen($imgTitle) < 1 || strlen($imgTitle) > 255) {
$error[] = 'Title must be at between 1 and 255 characters.';
}

// location where initial upload will be moved to
$target = "images/" . $_FILES['uploaded']['name'] ;

// find thevtype of image
switch ($_FILES["uploaded"]["type"]) {
case $_FILES["uploaded"]["type"] == "image/gif":
    move_uploaded_file($_FILES["uploaded"]["tmp_name"],$target);
    break;
case $_FILES["uploaded"]["type"] == "image/jpeg":
       move_uploaded_file($_FILES["uploaded"]["tmp_name"],$target);
    break;
case $_FILES["uploaded"]["type"] == "image/pjpeg":
       move_uploaded_file($_FILES["uploaded"]["tmp_name"],$target);
    break;
case $_FILES["uploaded"]["type"] == "image/png":
    move_uploaded_file($_FILES["uploaded"]["tmp_name"],$target);
    break;
case $_FILES["uploaded"]["type"] == "image/x-png":
    move_uploaded_file($_FILES["uploaded"]["tmp_name"],$target);
    break;

default:
    $error[] = 'Wrong image type selected. Only JPG, PNG or GIF accepted!.';
}

// if validation is okay then carry on
if (!$error) {

    // post form data
    $imgTitle   = $_POST['imgTitle'];

    //strip any tags from input
    $imgTitle   = strip_tags($imgTitle);

    // remove any harhful code and stop sql injection
    $imgTitle = mysql_real_escape_string($imgTitle);

    // insert data into images table
    $query = mysql_query("INSERT INTO images (itemTitle, itemPath) VALUES ('$imgTitle', '$target')")or die ('Cannot add image because: '. mysql_error());

    // show a message to confirm results
    echo 'Image Added';

}
}


//display any errors
if (!empty($error))
{
        $i = 0;
        echo "<p><span class='error'>";
        while ($i < count($error)){
        echo $error[$i].'<br />';
        $i ++;}
        echo "</span></p>";
}

?>

<form enctype="multipart/form-data" action="" method="post">
<p><label>Title:</label> <input name="imgTitle" type="text" size="40" value="<?php if (isset($error)){ echo $imgTitle; }?>" /></p>
<p><label>Image:</label><input name="uploaded" class="text-input" type="file" maxlength="20" value="" /></p>
<p><input type="submit" name="sub" class="button" value="Add Image"></p>
</form>