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>
Subscribe to my newsletter for the latest updates on my books and digital products.
Find posts, tutorials, and resources quickly.
Subscribe to my newsletter for the latest updates on my books and digital products.
