Uptown HTML
Image uploading is the transmission of a image file from one operating system to another. There are a series of operations a image has to go through befor it is successfully uploaded. A image goes through the browser, Apache, PHP, Linux and Mysql Database befor it is successfully uploaded.
In this lesson you will be learning how to create a successful image uploading system for your users
This lesson will include php sentax, a database structure and the proper html sturcture to create the proper image uploading system
The HTML
First we need to create what the user will see on the screen. This requires us to create a basic form with the action being a php echo variable called $_SERVER and $_GET as shown in the code below. Then inside of method you will have to put the word Post and lastly after the method we need to put in a enctype.
<form action="<?php echo $_SERVER['PHP_SELF'].'?albumid='.$_GET['albumid']; ?>" method="post" enctype="multipart/form-data">
<input type="hidden" name="albumid" value="<?php echo $_GET['albumid']; ?>" />
<fieldset>
<legend></legend>
<div>
<label class="requiredlabel" for="photo">Photo: </label>
<input type="file" name="photo" id="photo" />
</div>
<div>
<label class="requiredlabel" for="caption">Caption</label>
<input type="text" class="text required" id="caption" name="caption" value="" />
</div>
<div>
<input type="submit" name="submit" value="Upload" />
</div>
</fieldset>
</form>
The php syntax $_SERVER that we are using in our form action is used for information such as headers, paths, and script locations. The web server creates the entries in this array.
The php syntax $_GET that we are using in our form action is an array of variables passed to the current script via the URL parameters, this is information that will be visible to everyone.
The php syntax Enctype that we are using in our form action is needed so that other file types such as images can be passed through to the sever.
The PHP
Now this is where the magic happens. Here is where we take full control of the size, where the image goes, what type of image can be uploaded (gif,png,jpeg,etc..) and the messages that are being fed to the users after they have uploaded an image. As you view the code there are comments to help you understand what each peace of code is doing.
<?
if($_POST['submit']=='Upload') {
//'submit' is the name and 'upload' is the value and == is asking a question
// *** Include the class
//include("lib/classes/resize-class.php");
include('db_link.php'); //make a database connection
$dirname = $_POST["albumid"];
$fullpath = "/home4/garygib1/public_html/uptown-html/uploads/{$dirname}/";//This is your full path to your website so this will be diffrent for everyone.
if (!file_exists($fullpath)) { // make sure there is a directory to upload the photo to
mkdir($fullpath); // if not, create one
}
// check to see if document is proper file type
//the first peace is the name of the input (photo)
if (
($_FILES["photo"]["type"] == "image/gif")
|| ($_FILES["photo"]["type"] == "image/jpeg")
|| ($_FILES["photo"]["type"] == "image/pjpeg")
|| ($_FILES["photo"]["type"] == "image/jpg")
|| ($_FILES["photo"]["type"] == "image/png")
) {
// now confirm it's not too big
if ($_FILES["photo"]["size"] < 2000000) { // less than 2MB
// were any errors generated?
if ($_FILES["photo"]["error"] > 0) {
$msg .= "<p class=\"alert\">Error Code: " . $_FILES["photo"]["error"] . "</p>";
} else {
// does this file exist already? if so tell the user.
if (file_exists($fullpath . $_FILES["photo"]["name"])) {
$msg .= "<p class=\"important_text_info\">". $_FILES["photo"]["name"] . " already exists.</p>";
} else {
//move the file out of the temp directory and into its new home
move_uploaded_file($_FILES["photo"]["tmp_name"], ($fullpath . $_FILES["photo"]["name"]));
//this means the image went to the te,p folder so now we move it to the correct folder with that image name.
$permissions = chmod(($fullpath . $_FILES["photo"]["name"]),0755); // MAKE SURE NEW FILE HAS CORRECT PERMISSIONS
if(!$permissions ) { $msg .= "<p class=\"important_text_info\">Permissions failed to update.</p>"; } else { $msg .= "<p class=\"important_text_info\">File has successfully uploaded.</p>"; }
$width = getimagesize($fullpath . $_FILES["photo"]["name"]);
if($width[1] > $width[0]) { $orientation = 1; } else { $orientation = 0; }
$sql = 'INSERT INTO `images` (`imageid`, `albumid`, `caption`, `filename`,`addeddate`, `addedby`, `active`, `portrait`) VALUES (NULL, \''.$albumid.'\', \''.mysql_real_escape_string(stripslashes($_POST['caption'])).'\', \''. $_FILES["photo"]["name"] .'\', CURRENT_TIMESTAMP, \'1\', \'1\',\''.$orientation.'\');';
if (!mysql_query($sql,$con)) { // Throw an error if there was a problem with the database insert
die('Error: ' . mysql_error());
}
} // closes pre-existing file check
} // closes error check
} else {
$msg .= "<p class=\"important_text_info\">File Size Too Large. Files must be less than 2MB.</p>";
}
} else {
$msg .= "<p class=\"important_text_info\">Invalid file. Files must be .JPGs, .GIFs, or .PNGs.</p>";
} // closes invalid file check
} // closes $_POST upload check
?>
The Database
Here is were we connect to our database and the database table that we are currently using for our task. We need to connect to our database by putting in the type of host, the username and the password witch is located after $con = mysql_connect. Then we need to connect to the correct database table witch is inside of the parentheses of mysql_select_db("").
<?php
//this is where you connect to your personal database by verifying the type of host, username and the password
$con = mysql_connect ("localhost","garygib1","*****");
if(!$con){
die('could not conenct'. mysql_error());
}
//this is how you connect to the correct database table that is being used for this specific project
mysql_select_db("garygib1_cbt2",$con);
?>
The Finished Peace
Now that you understand how to get images to upload to your data base the proper way, try and take the quiz to the right of the screen an see how much you really know GOOD LUCK!!!