Black Friday sale is now on! 50% off Laravel: The Modular Way. Learn more

Upload images through a simple form

David Carr

PHP & MySQL Tutorials

    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>

     

    Laravel Modules Book by David Carr

    Help support the blog so that I can continue creating new content!

    Subscribe to my newsletter

    Subscribe and get my books and product announcements.

    © 2009 - 2022 DC Blog. All code MIT license. All rights reserved.