[SOLVED] Help modding Image resize/crop script to insert image path to mysql table?

littlevisuals · July 11, 2009

Hi all,

Great site, hope someone can solve my issue I have with a script. I have tried google and reading my book with no avail! ???

What I have done is merged two scripts, an image resize/crop with normal records (firstname, lastname etc). With the goal of being able to add an artist, with description, about and a profile pic. Only trouble is the script I got from http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop-v11 puts the picture in a directory (thats what I wanted) but however I need it to store the path with the rest of the details (first name, last name etc). So I can call the profile and display all info (with pic)

As you can see I have merged the 2 together but cant figure out how to extract the path and insert with the other script?

add.php

<?php

error_reporting (E_ALL ^ E_NOTICE);
session_start(); //Do not remove this
//only assign a new timestamp if the session variable is empty
if (!isset($_SESSION['random_key']) || strlen($_SESSION['random_key'])==0){
    $_SESSION['random_key'] = strtotime(date('Y-m-d H:i:s')); //assign the timestamp to the session variable
$_SESSION['user_file_ext']= "";
}
#########################################################################################################
# CONSTANTS																								#
# You can alter the options below																		#
#########################################################################################################
$upload_dir = "images"; 				// The directory for the images to be saved in
$upload_path = $upload_dir."/";				// The path to where the image will be saved
$large_image_prefix = "resize_"; 			// The prefix name to large image
$thumb_image_prefix = "artist_pic_";			// The prefix name to the thumb image
$large_image_name = $large_image_prefix.$_SESSION['random_key'];     // New name of the large image (append the timestamp to the filename)
$thumb_image_name = $thumb_image_prefix.$_SESSION['random_key'];     // New name of the thumbnail image (append the timestamp to the filename)
$max_file = "3"; 							// Maximum file size in MB
$max_width = "500";							// Max width allowed for the large image
$thumb_width = "100";						// Width of thumbnail image
$thumb_height = "100";						// Height of thumbnail image
// Only one of these image types should be allowed for upload
$allowed_image_types = array('image/pjpeg'=>"jpg",'image/jpeg'=>"jpg",'image/jpg'=>"jpg",'image/png'=>"png",'image/x-png'=>"png",'image/gif'=>"gif");
$allowed_image_ext = array_unique($allowed_image_types); // do not change this
$image_ext = "";	// initialise variable, do not change this.
foreach ($allowed_image_ext as $mime_type => $ext) {
    $image_ext.= strtoupper($ext)." ";
}


##########################################################################################################
# IMAGE FUNCTIONS																						 #
# You do not need to alter these functions																 #
##########################################################################################################
function resizeImage($image,$width,$height,$scale) {
list($imagewidth, $imageheight, $imageType) = getimagesize($image);
$imageType = image_type_to_mime_type($imageType);
$newImageWidth = ceil($width * $scale);
$newImageHeight = ceil($height * $scale);
$newImage = imagecreatetruecolor($newImageWidth,$newImageHeight);
switch($imageType) {
	case "image/gif":
		$source=imagecreatefromgif($image); 
		break;
    case "image/pjpeg":
	case "image/jpeg":
	case "image/jpg":
		$source=imagecreatefromjpeg($image); 
		break;
    case "image/png":
	case "image/x-png":
		$source=imagecreatefrompng($image); 
		break;
  	}
imagecopyresampled($newImage,$source,0,0,0,0,$newImageWidth,$newImageHeight,$width,$height);

switch($imageType) {
	case "image/gif":
  		imagegif($newImage,$image); 
		break;
      	case "image/pjpeg":
	case "image/jpeg":
	case "image/jpg":
  		imagejpeg($newImage,$image,90); 
		break;
	case "image/png":
	case "image/x-png":
		imagepng($newImage,$image);  
		break;
    }

chmod($image, 0777);
return $image;
}
//You do not need to alter these functions
function resizeThumbnailImage($thumb_image_name, $image, $width, $height, $start_width, $start_height, $scale){
list($imagewidth, $imageheight, $imageType) = getimagesize($image);
$imageType = image_type_to_mime_type($imageType);

$newImageWidth = ceil($width * $scale);
$newImageHeight = ceil($height * $scale);
$newImage = imagecreatetruecolor($newImageWidth,$newImageHeight);
switch($imageType) {
	case "image/gif":
		$source=imagecreatefromgif($image); 
		break;
    case "image/pjpeg":
	case "image/jpeg":
	case "image/jpg":
		$source=imagecreatefromjpeg($image); 
		break;
    case "image/png":
	case "image/x-png":
		$source=imagecreatefrompng($image); 
		break;
  	}
imagecopyresampled($newImage,$source,0,0,$start_width,$start_height,$newImageWidth,$newImageHeight,$width,$height);
switch($imageType) {
	case "image/gif":
  		imagegif($newImage,$thumb_image_name); 
		break;
      	case "image/pjpeg":
	case "image/jpeg":
	case "image/jpg":
  		imagejpeg($newImage,$thumb_image_name,90); 
		break;
	case "image/png":
	case "image/x-png":
		imagepng($newImage,$thumb_image_name);  
		break;
    }
chmod($thumb_image_name, 0777);
return $thumb_image_name;
}
//You do not need to alter these functions
function getHeight($image) {
$size = getimagesize($image);
$height = $size[1];
return $height;
}
//You do not need to alter these functions
function getWidth($image) {
$size = getimagesize($image);
$width = $size[0];
return $width;
}

//Image Locations
$large_image_location = $upload_path.$large_image_name.$_SESSION['user_file_ext'];
$thumb_image_location = $upload_path.$thumb_image_name.$_SESSION['user_file_ext'];

//Create the upload directory with the right permissions if it doesn't exist
if(!is_dir($upload_dir)){
mkdir($upload_dir, 0777);
chmod($upload_dir, 0777);
}

//Check to see if any images with the same name already exist
if (file_exists($large_image_location)){
if(file_exists($thumb_image_location)){
	$thumb_photo_exists = "<img src=\"".$upload_path.$thumb_image_name.$_SESSION['user_file_ext']."\" alt=\"Thumbnail Image\"/>";
}else{
	$thumb_photo_exists = "";
}
   	$large_photo_exists = "<img src=\"".$upload_path.$large_image_name.$_SESSION['user_file_ext']."\" alt=\"Large Image\"/>";
} else {
   	$large_photo_exists = "";
$thumb_photo_exists = "";
}

if (isset($_POST["upload"])) { 
//Get the file information
$userfile_name = $_FILES['image']['name'];
$userfile_tmp = $_FILES['image']['tmp_name'];
$userfile_size = $_FILES['image']['size'];
$userfile_type = $_FILES['image']['type'];
$filename = basename($_FILES['image']['name']);
$file_ext = strtolower(substr($filename, strrpos($filename, '.') + 1));

//Only process if the file is a JPG, PNG or GIF and below the allowed limit
if((!empty($_FILES["image"])) && ($_FILES['image']['error'] == 0)) {

	foreach ($allowed_image_types as $mime_type => $ext) {
		//loop through the specified image types and if they match the extension then break out
		//everything is ok so go and check file size
		if($file_ext==$ext && $userfile_type==$mime_type){
			$error = "";
			break;
		}else{
			$error = "Only <strong>".$image_ext."</strong> images accepted for upload<br />";
		}
	}
	//check if the file size is above the allowed limit
	if ($userfile_size > ($max_file*1048576)) {
		$error.= "Images must be under ".$max_file."MB in size";
	}

}else{
	$error= "Select an image for upload";
}
//Everything is ok, so we can upload the image.
if (strlen($error)==0){

	if (isset($_FILES['image']['name'])){
		//this file could now has an unknown file extension (we hope it's one of the ones set above!)
		$large_image_location = $large_image_location.".".$file_ext;
		$thumb_image_location = $thumb_image_location.".".$file_ext;

		//put the file ext in the session so we know what file to look for once its uploaded
		$_SESSION['user_file_ext']=".".$file_ext;

		move_uploaded_file($userfile_tmp, $large_image_location);
		chmod($large_image_location, 0777);

		$width = getWidth($large_image_location);
		$height = getHeight($large_image_location);
		//Scale the image if it is greater than the width set above
		if ($width > $max_width){
			$scale = $max_width/$width;
			$uploaded = resizeImage($large_image_location,$width,$height,$scale);
		}else{
			$scale = 1;
			$uploaded = resizeImage($large_image_location,$width,$height,$scale);
		}
		//Delete the thumbnail file so the user can create a new one
		if (file_exists($thumb_image_location)) {
			unlink($thumb_image_location);
		}
	}
	//Refresh the page to show the new uploaded image
	header("location:".$_SERVER["PHP_SELF"]);
	exit();
}
}

if (isset($_POST["upload_thumbnail"]) && strlen($large_photo_exists)>0) {
//Get the new coordinates to crop the image.
$x1 = $_POST["x1"];
$y1 = $_POST["y1"];
$x2 = $_POST["x2"];
$y2 = $_POST["y2"];
$w = $_POST["w"];
$h = $_POST["h"];
//Scale the image to the thumb_width set above
$scale = $thumb_width/$w;
$cropped = resizeThumbnailImage($thumb_image_location, $large_image_location,$w,$h,$x1,$y1,$scale);
//Reload the page again to view the thumbnail
header("location:".$_SERVER["PHP_SELF"]);
exit();
}


if ($_GET['a']=="delete" && strlen($_GET['t'])>0){
//get the file locations 
$large_image_location = $upload_path.$large_image_prefix.$_GET['t'];
$thumb_image_location = $upload_path.$thumb_image_prefix.$_GET['t'];
if (file_exists($large_image_location)) {
	unlink($large_image_location);
}
if (file_exists($thumb_image_location)) {
	unlink($thumb_image_location);
}
header("location:".$_SERVER["PHP_SELF"]);
exit(); 
}


?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="generator" content="WebMotionUK" />
<title>WebMotionUK - PHP & Jquery image upload & crop</title>
<script type="text/javascript" src="js/jquery-pack.js"></script>
<script type="text/javascript" src="js/jquery.imgareaselect.min.js"></script>
</head>
<body>
<!-- 
* Copyright (c) 2008 http://www.webmotionuk.com / http://www.webmotionuk.co.uk
* Date: 2008-11-21
* "PHP & Jquery image upload & crop"
* Ver 1.2
* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 
* ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 
* WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. 
* IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, 
* INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, 
* PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS 
* INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, 
* STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF 
* THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*
* http://www.opensource.org/licenses/bsd-license.php
-->
<ul>
<li><a href="http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop/">Back to project page</a></li>
<li><a href="http://www.webmotionuk.co.uk/jquery_upload_crop.zip">Download Files</a></li>
</ul>
<?php
//Only display the javacript if an image has been uploaded
if(strlen($large_photo_exists)>0){
$current_large_image_width = getWidth($large_image_location);
$current_large_image_height = getHeight($large_image_location);?>
<script type="text/javascript">
function preview(img, selection) { 
var scaleX = <?php echo $thumb_width;?> / selection.width; 
var scaleY = <?php echo $thumb_height;?> / selection.height; 

$('#thumbnail + div > img').css({ 
	width: Math.round(scaleX * <?php echo $current_large_image_width;?>) + 'px', 
	height: Math.round(scaleY * <?php echo $current_large_image_height;?>) + 'px',
	marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', 
	marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' 
});
$('#x1').val(selection.x1);
$('#y1').val(selection.y1);
$('#x2').val(selection.x2);
$('#y2').val(selection.y2);
$('#w').val(selection.width);
$('#h').val(selection.height);
} 

$(document).ready(function () { 
$('#save_thumb').click(function() {
	var x1 = $('#x1').val();
	var y1 = $('#y1').val();
	var x2 = $('#x2').val();
	var y2 = $('#y2').val();
	var w = $('#w').val();
	var h = $('#h').val();
	if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || h==""){
		alert("You must make a selection first");
		return false;
	}else{
		return true;
	}
});
}); 

$(window).load(function () { 
$('#thumbnail').imgAreaSelect({ aspectRatio: '1:<?php echo $thumb_height/$thumb_width;?>', onSelectChange: preview }); 
});

</script>
<?php }?>
<h1>Photo Upload and Crop</h1>
<?php
//Display error message if there are any
if(strlen($error)>0){
echo "<ul><li><strong>Error!</strong></li><li>".$error."</li></ul>";
}
if(strlen($large_photo_exists)>0 && strlen($thumb_photo_exists)>0){
echo $large_photo_exists." ".$thumb_photo_exists;
echo "<p><a href=\"".$_SERVER["PHP_SELF"]."?a=delete&t=".$_SESSION['random_key'].$_SESSION['user_file_ext']."\">Delete images</a></p>";
echo "<p><a href=\"".$_SERVER["PHP_SELF"]."\">Upload another</a></p>";
//Clear the time stamp session and user file extension
$_SESSION['random_key']= "";
$_SESSION['user_file_ext']= "";
}else{
	if(strlen($large_photo_exists)>0){?>
	<h2>Create Thumbnail</h2>
	<div align="center">
		<img src="<?php echo $upload_path.$large_image_name.$_SESSION['user_file_ext'];?>" style="float: left; margin-right: 10px;" id="thumbnail" alt="Create Thumbnail" />
		<div style="border:1px #e5e5e5 solid; float:left; position:relative; overflow:hidden; width:<?php echo $thumb_width;?>px; height:<?php echo $thumb_height;?>px;">
			<img src="<?php echo $upload_path.$large_image_name.$_SESSION['user_file_ext'];?>" style="position: relative;" alt="Thumbnail Preview" />
		</div>
		<br style="clear:both;"/>
		<form name="thumbnail" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
			<input type="hidden" name="x1" value="" id="x1" />
			<input type="hidden" name="y1" value="" id="y1" />
			<input type="hidden" name="x2" value="" id="x2" />
			<input type="hidden" name="y2" value="" id="y2" />
			<input type="hidden" name="w" value="" id="w" />
			<input type="hidden" name="h" value="" id="h" />
			<input type="submit" name="upload_thumbnail" value="Save Thumbnail" id="save_thumb" />
		</form>
	</div>
<hr />
<?php 	} ?>
<h2>Upload Photo</h2>
<form name="photo" enctype="multipart/form-data" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
Photo <input type="file" name="image" size="30" /> <input type="submit" name="upload" value="Upload" onclick="form.action='add.php';"/>
</form>
<?php } ?>
<!-- Copyright (c) 2008 http://www.webmotionuk.com -->
<form id="FormName" action="added.php" method="post" name="FormName">

<table width="448" border="0" cellspacing="2" cellpadding="0">
<tr><td width = "150"><div align="right"><label for="artist_firstname">artist_firstname</label></div></td>
<td><input id="artist_firstname" name="artist_firstname" type="text" size="25" value="" maxlength="30"></td></tr><tr><td width = "150"><div align="right"><label for="artist_lastname">artist_lastname</label></div></td>
<td><input id="artist_lastname" name="artist_lastname" type="text" size="25" value="" maxlength="30"></td></tr><tr><td width = "150"><div align="right"></div></td>
<input id="$thumb_image_location" name="$thumb_image_location" type="hidden" size="25" value="" maxlength="30">
  <td> </td>
</tr><tr><td width = "150"><div align="right"><label for="artist_about">artist_about</label></div></td>

<td><textarea id="artist_about" name="artist_about" rows="4" cols="40"></textarea></td></tr><tr><td width = "150"><div align="right"><label for="artist_descript">artist_descript</label></div></td>
<td><textarea id="artist_descript" name="artist_descript" rows="4" cols="40"></textarea></td></tr><tr><td width = "150"><div align="right"><label for="artist_timestamp">artist_timestamp</label></div></td>
<td><input id="artist_timestamp" name="artist_timestamp" type="text" size="25" value="" maxlength="255"></td></tr><tr><td width="150"></td><td>
<input type="submit" name="submitButtonName" value="Add"></td>
</tr></table></form>
</body>
</html>

added.php

<?php
include("connect.php");
$artist_firstname = $_POST['artist_firstname'];
$artist_lastname = $_POST['artist_lastname'];
$thumb_image_location = $_GET['thumb_image_location'];
$artist_about = $_POST['artist_about'];
$artist_descript = $_POST['artist_descript'];
$artist_timestamp = $_POST['artist_timestamp'];

$query = "INSERT INTO artists (id, artist_firstname, artist_lastname, thumb_image_location, artist_about, artist_descript, artist_timestamp)
VALUES ('', '$artist_firstname', '$artist_lastname', '$thumb_image_location', '$artist_about', '$artist_descript', '$artist_timestamp')";

  

$results = mysql_query($query) or die 
("Could not execute query : $query." . mysql_error());

if ($results)
{
echo "Details added.";
}
mysql_close();
?>

??? From a php point of view, is this even possible when they are seperate forms?, and my question being is their any solution for this?

Ultimately im trying to insert the image path data into a table so I can call upon the directory.

Thanks for your time in reading this far, their is a lot of code to get through

MadTechie · July 11, 2009

Why not have the image upload and the user details in the same form and then remove the "Reload the page again to view the thumbnail" code or include the added.php code

littlevisuals · July 11, 2009

Why not have the image upload and the user details in the same form and then remove the "Reload the page again to view the thumbnail" code or include the added.php code

Hi MadTechie! Thanks for the swift response!

Nice suggestion. I think thats definately the way to go, having the user details and image upload in the same form.

Only problem im having is getting my head around merging the two? removing the reload brings a white screen everytime a click save, even having it go back to add.php. Im now currently trying to merge the added into the same page but I dont know what actions to use?

I know what to do, but dont know how to change it. Is there anything I should be searching up on to help understand this situation?

Thanks again.

MadTechie · July 11, 2009

1. change

<form id="FormName" action="added.php" method="post" name="FormName">

to

<form id="FormName" action="" method="post" name="FormName">

2. change (no real reason for this but submitButtonName sounds dumb to me!

<input type="submit" name="submitButtonName" value="Add">

to

<input type="submit" name="AddDetails" value="Add">

3. Add this to the details form

Photo <input type="file" name="image" size="30" />

4. change

if (isset($_POST["upload"])) {

to

if (!empty($_FILES["image"]['tmp_name'])) {

5. Add

<?php
include("connect.php");
$artist_firstname = $_POST['artist_firstname'];
$artist_lastname = $_POST['artist_lastname'];
$artist_about = $_POST['artist_about'];
$artist_descript = $_POST['artist_descript'];
$artist_timestamp = $_POST['artist_timestamp'];
//SQL INJECTION protection to be added

$query = "INSERT INTO artists (id, artist_firstname, artist_lastname, thumb_image_location, artist_about, artist_descript, artist_timestamp)
VALUES ('', '$artist_firstname', '$artist_lastname', '$thumb_image_location', '$artist_about', '$artist_descript', '$artist_timestamp')";

$results = mysql_query($query) or die ("Could not execute query : $query." . mysql_error());

if ($results)
{
echo "Details added.";
}
?>

infront of

   //Reload the page again to view the thumbnail
   header("location:".$_SERVER["PHP_SELF"]);
   exit();

Test that and if its all okay you can remove the image form

*the above is untested*

littlevisuals · July 12, 2009

Thanks for your time, Ive tried the code and the plot thickens...

When I upload a picture and crop a thumbnail it has the save button, and when I click it success! It stores the exact image path. It then goes to your message Details added.

and underneath the error

Warning: Cannot modify header information - headers already sent by (output started at /Library/WebServer/Documents/art/artists/add.php:245) in /Library/WebServer/Documents/art/artists/add.php on line 248

when i remove

header("location:".$_SERVER["PHP_SELF"]);

it just echos 'Details Added' and stores the image path but no user data ( as it inserts the image path without waiting for the user data)

The form with the user data will not insert into the table at all.

I didnt know where you wanted me to put the

Photo <input type="file" name="image" size="30" />

as the script requires the file to be uploaded to crop.

here is what I have at the moment.

<?php

error_reporting (E_ALL ^ E_NOTICE);
session_start(); //Do not remove this
//only assign a new timestamp if the session variable is empty
if (!isset($_SESSION['random_key']) || strlen($_SESSION['random_key'])==0){
    $_SESSION['random_key'] = strtotime(date('Y-m-d H:i:s')); //assign the timestamp to the session variable
   $_SESSION['user_file_ext']= "";
}
#########################################################################################################
# CONSTANTS                                                                        #
# You can alter the options below                                                      #
#########################################################################################################
$upload_dir = "images";             // The directory for the images to be saved in
$upload_path = $upload_dir."/";            // The path to where the image will be saved
$large_image_prefix = "resize_";          // The prefix name to large image
$thumb_image_prefix = "artist_pic_";         // The prefix name to the thumb image
$large_image_name = $large_image_prefix.$_SESSION['random_key'];     // New name of the large image (append the timestamp to the filename)
$thumb_image_name = $thumb_image_prefix.$_SESSION['random_key'];     // New name of the thumbnail image (append the timestamp to the filename)
$max_file = "3";                      // Maximum file size in MB
$max_width = "500";                     // Max width allowed for the large image
$thumb_width = "100";                  // Width of thumbnail image
$thumb_height = "100";                  // Height of thumbnail image
// Only one of these image types should be allowed for upload
$allowed_image_types = array('image/pjpeg'=>"jpg",'image/jpeg'=>"jpg",'image/jpg'=>"jpg",'image/png'=>"png",'image/x-png'=>"png",'image/gif'=>"gif");
$allowed_image_ext = array_unique($allowed_image_types); // do not change this
$image_ext = "";   // initialise variable, do not change this.
foreach ($allowed_image_ext as $mime_type => $ext) {
    $image_ext.= strtoupper($ext)." ";
}


##########################################################################################################
# IMAGE FUNCTIONS                                                                   #
# You do not need to alter these functions                                                 #
##########################################################################################################
function resizeImage($image,$width,$height,$scale) {
   list($imagewidth, $imageheight, $imageType) = getimagesize($image);
   $imageType = image_type_to_mime_type($imageType);
   $newImageWidth = ceil($width * $scale);
   $newImageHeight = ceil($height * $scale);
   $newImage = imagecreatetruecolor($newImageWidth,$newImageHeight);
   switch($imageType) {
      case "image/gif":
         $source=imagecreatefromgif($image); 
         break;
       case "image/pjpeg":
      case "image/jpeg":
      case "image/jpg":
         $source=imagecreatefromjpeg($image); 
         break;
       case "image/png":
      case "image/x-png":
         $source=imagecreatefrompng($image); 
         break;
     }
   imagecopyresampled($newImage,$source,0,0,0,0,$newImageWidth,$newImageHeight,$width,$height);
   
   switch($imageType) {
      case "image/gif":
           imagegif($newImage,$image); 
         break;
         case "image/pjpeg":
      case "image/jpeg":
      case "image/jpg":
           imagejpeg($newImage,$image,90); 
         break;
      case "image/png":
      case "image/x-png":
         imagepng($newImage,$image);  
         break;
    }
   
   chmod($image, 0777);
   return $image;
}
//You do not need to alter these functions
function resizeThumbnailImage($thumb_image_name, $image, $width, $height, $start_width, $start_height, $scale){
   list($imagewidth, $imageheight, $imageType) = getimagesize($image);
   $imageType = image_type_to_mime_type($imageType);
   
   $newImageWidth = ceil($width * $scale);
   $newImageHeight = ceil($height * $scale);
   $newImage = imagecreatetruecolor($newImageWidth,$newImageHeight);
   switch($imageType) {
      case "image/gif":
         $source=imagecreatefromgif($image); 
         break;
       case "image/pjpeg":
      case "image/jpeg":
      case "image/jpg":
         $source=imagecreatefromjpeg($image); 
         break;
       case "image/png":
      case "image/x-png":
         $source=imagecreatefrompng($image); 
         break;
     }
   imagecopyresampled($newImage,$source,0,0,$start_width,$start_height,$newImageWidth,$newImageHeight,$width,$height);
   switch($imageType) {
      case "image/gif":
           imagegif($newImage,$thumb_image_name); 
         break;
         case "image/pjpeg":
      case "image/jpeg":
      case "image/jpg":
           imagejpeg($newImage,$thumb_image_name,90); 
         break;
      case "image/png":
      case "image/x-png":
         imagepng($newImage,$thumb_image_name);  
         break;
    }
   chmod($thumb_image_name, 0777);
   return $thumb_image_name;
}
//You do not need to alter these functions
function getHeight($image) {
   $size = getimagesize($image);
   $height = $size[1];
   return $height;
}
//You do not need to alter these functions
function getWidth($image) {
   $size = getimagesize($image);
   $width = $size[0];
   return $width;
}

//Image Locations
$large_image_location = $upload_path.$large_image_name.$_SESSION['user_file_ext'];
$thumb_image_location = $upload_path.$thumb_image_name.$_SESSION['user_file_ext'];

//Create the upload directory with the right permissions if it doesn't exist
if(!is_dir($upload_dir)){
   mkdir($upload_dir, 0777);
   chmod($upload_dir, 0777);
}

//Check to see if any images with the same name already exist
if (file_exists($large_image_location)){
   if(file_exists($thumb_image_location)){
      $thumb_photo_exists = "<img src=\"".$upload_path.$thumb_image_name.$_SESSION['user_file_ext']."\" alt=\"Thumbnail Image\"/>";
   }else{
      $thumb_photo_exists = "";
   }
      $large_photo_exists = "<img src=\"".$upload_path.$large_image_name.$_SESSION['user_file_ext']."\" alt=\"Large Image\"/>";
} else {
      $large_photo_exists = "";
   $thumb_photo_exists = "";
}

if (!empty($_FILES["image"]['tmp_name'])) {  
   //Get the file information
   $userfile_name = $_FILES['image']['name'];
   $userfile_tmp = $_FILES['image']['tmp_name'];
   $userfile_size = $_FILES['image']['size'];
   $userfile_type = $_FILES['image']['type'];
   $filename = basename($_FILES['image']['name']);
   $file_ext = strtolower(substr($filename, strrpos($filename, '.') + 1));
   
   //Only process if the file is a JPG, PNG or GIF and below the allowed limit
   if((!empty($_FILES["image"])) && ($_FILES['image']['error'] == 0)) {
      
      foreach ($allowed_image_types as $mime_type => $ext) {
         //loop through the specified image types and if they match the extension then break out
         //everything is ok so go and check file size
         if($file_ext==$ext && $userfile_type==$mime_type){
            $error = "";
            break;
         }else{
            $error = "Only <strong>".$image_ext."</strong> images accepted for upload<br />";
         }
      }
      //check if the file size is above the allowed limit
      if ($userfile_size > ($max_file*1048576)) {
         $error.= "Images must be under ".$max_file."MB in size";
      }
      
   }else{
      $error= "Select an image for upload";
   }
   //Everything is ok, so we can upload the image.
   if (strlen($error)==0){
      
      if (isset($_FILES['image']['name'])){
         //this file could now has an unknown file extension (we hope it's one of the ones set above!)
         $large_image_location = $large_image_location.".".$file_ext;
         $thumb_image_location = $thumb_image_location.".".$file_ext;
         
         //put the file ext in the session so we know what file to look for once its uploaded
         $_SESSION['user_file_ext']=".".$file_ext;
         
         move_uploaded_file($userfile_tmp, $large_image_location);
         chmod($large_image_location, 0777);
         
         $width = getWidth($large_image_location);
         $height = getHeight($large_image_location);
         //Scale the image if it is greater than the width set above
         if ($width > $max_width){
            $scale = $max_width/$width;
            $uploaded = resizeImage($large_image_location,$width,$height,$scale);
         }else{
            $scale = 1;
            $uploaded = resizeImage($large_image_location,$width,$height,$scale);
         }
         //Delete the thumbnail file so the user can create a new one
         if (file_exists($thumb_image_location)) {
            unlink($thumb_image_location);
         }
      }
      //Refresh the page to show the new uploaded image
      header("location:".$_SERVER["PHP_SELF"]);
      exit();
   }
}

if (isset($_POST["upload_thumbnail"]) && strlen($large_photo_exists)>0) {
   //Get the new coordinates to crop the image.
   $x1 = $_POST["x1"];
   $y1 = $_POST["y1"];
   $x2 = $_POST["x2"];
   $y2 = $_POST["y2"];
   $w = $_POST["w"];
   $h = $_POST["h"];
   //Scale the image to the thumb_width set above
   $scale = $thumb_width/$w;
   $cropped = resizeThumbnailImage($thumb_image_location, $large_image_location,$w,$h,$x1,$y1,$scale);
   
   include("connect.php");
$artist_firstname = $_POST['artist_firstname'];
$artist_lastname = $_POST['artist_lastname'];
$artist_about = $_POST['artist_about'];
$artist_descript = $_POST['artist_descript'];
$artist_timestamp = $_POST['artist_timestamp'];
//SQL INJECTION protection to be added

$query = "INSERT INTO artists (id, artist_firstname, artist_lastname, thumb_image_location, artist_about, artist_descript, artist_timestamp)
VALUES ('', '$artist_firstname', '$artist_lastname', '$thumb_image_location', '$artist_about', '$artist_descript', '$artist_timestamp')";

$results = mysql_query($query) or die ("Could not execute query : $query." . mysql_error());

if ($results)
{
echo "Details added.";
}
   //Reload the page again to view the thumbnail
   header("location:".$_SERVER["PHP_SELF"]);
   exit();
}


if ($_GET['a']=="delete" && strlen($_GET['t'])>0){
//get the file locations 
   $large_image_location = $upload_path.$large_image_prefix.$_GET['t'];
   $thumb_image_location = $upload_path.$thumb_image_prefix.$_GET['t'];
   if (file_exists($large_image_location)) {
      unlink($large_image_location);
   }
   if (file_exists($thumb_image_location)) {
      unlink($thumb_image_location);
   }
   header("location:".$_SERVER["PHP_SELF"]);
   exit(); 
}


?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <meta name="generator" content="WebMotionUK" />
   <title>WebMotionUK - PHP & Jquery image upload & crop</title>
   <script type="text/javascript" src="js/jquery-pack.js"></script>
   <script type="text/javascript" src="js/jquery.imgareaselect.min.js"></script>
</head>
<body>
<!--
* Copyright (c) 2008 http://www.webmotionuk.com / http://www.webmotionuk.co.uk
* Date: 2008-11-21
* "PHP & Jquery image upload & crop"
* Ver 1.2
* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
* ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
* WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED.
* IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT,
* INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
* PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
* INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT,
* STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF
* THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*
* http://www.opensource.org/licenses/bsd-license.php
-->
<ul>
   <li><a href="http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop/">Back to project page</a></li>
   <li><a href="http://www.webmotionuk.co.uk/jquery_upload_crop.zip">Download Files</a></li>
</ul>
<?php
//Only display the javacript if an image has been uploaded
if(strlen($large_photo_exists)>0){
   $current_large_image_width = getWidth($large_image_location);
   $current_large_image_height = getHeight($large_image_location);?>
<script type="text/javascript">
function preview(img, selection) {
   var scaleX = <?php echo $thumb_width;?> / selection.width;
   var scaleY = <?php echo $thumb_height;?> / selection.height;
   
   $('#thumbnail + div > img').css({
      width: Math.round(scaleX * <?php echo $current_large_image_width;?>) + 'px',
      height: Math.round(scaleY * <?php echo $current_large_image_height;?>) + 'px',
      marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
      marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
   });
   $('#x1').val(selection.x1);
   $('#y1').val(selection.y1);
   $('#x2').val(selection.x2);
   $('#y2').val(selection.y2);
   $('#w').val(selection.width);
   $('#h').val(selection.height);
}

$(document).ready(function () {
   $('#save_thumb').click(function() {
      var x1 = $('#x1').val();
      var y1 = $('#y1').val();
      var x2 = $('#x2').val();
      var y2 = $('#y2').val();
      var w = $('#w').val();
      var h = $('#h').val();
      if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || h==""){
         alert("You must make a selection first");
         return false;
      }else{
         return true;
      }
   });
});

$(window).load(function () {
   $('#thumbnail').imgAreaSelect({ aspectRatio: '1:<?php echo $thumb_height/$thumb_width;?>', onSelectChange: preview });
});

</script>
<?php }?>
<h1>Photo Upload and Crop</h1>
<?php
//Display error message if there are any
if(strlen($error)>0){
   echo "<ul><li><strong>Error!</strong></li><li>".$error."</li></ul>";
}
if(strlen($large_photo_exists)>0 && strlen($thumb_photo_exists)>0){
   echo $large_photo_exists." ".$thumb_photo_exists;
   echo "<p><a href=\"".$_SERVER["PHP_SELF"]."?a=delete&t=".$_SESSION['random_key'].$_SESSION['user_file_ext']."\">Delete images</a></p>";
   echo "<p><a href=\"".$_SERVER["PHP_SELF"]."\">Upload another</a></p>";
   //Clear the time stamp session and user file extension
   $_SESSION['random_key']= "";
   $_SESSION['user_file_ext']= "";
}else{
      if(strlen($large_photo_exists)>0){?>
      <h2>Create Thumbnail</h2>
      <div align="center">
         <img src="<?php echo $upload_path.$large_image_name.$_SESSION['user_file_ext'];?>" style="float: left; margin-right: 10px;" id="thumbnail" alt="Create Thumbnail" />
         <div style="border:1px #e5e5e5 solid; float:left; position:relative; overflow:hidden; width:<?php echo $thumb_width;?>px; height:<?php echo $thumb_height;?>px;">
            <img src="<?php echo $upload_path.$large_image_name.$_SESSION['user_file_ext'];?>" style="position: relative;" alt="Thumbnail Preview" />
         </div>
         <br style="clear:both;"/>
         <form name="thumbnail" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
            <input type="hidden" name="x1" value="" id="x1" />
            <input type="hidden" name="y1" value="" id="y1" />
            <input type="hidden" name="x2" value="" id="x2" />
            <input type="hidden" name="y2" value="" id="y2" />
            <input type="hidden" name="w" value="" id="w" />
            <input type="hidden" name="h" value="" id="h" />
            <input type="submit" name="upload_thumbnail" value="Save Thumbnail" id="save_thumb" />
         </form>
      </div>
<hr />
   <?php    } ?>
   <h2>Upload Photo</h2>
   <form name="photo" enctype="multipart/form-data" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
   Photo <input type="file" name="image" size="30" /> <input type="submit" name="upload" value="Upload" onclick="form.action='add.php';"/>
   </form>
<?php } ?>
<!-- Copyright (c) 2008 http://www.webmotionuk.com -->
<form id="FormName" action="" method="post" name="FormName">
Photo <input type="file" name="image" size="30" />
<table width="448" border="0" cellspacing="2" cellpadding="0">
<tr><td width = "150"><div align="right"><label for="artist_firstname">artist_firstname</label></div></td>
<td><input id="artist_firstname" name="artist_firstname" type="text" size="25" value="" maxlength="30"></td></tr><tr><td width = "150"><div align="right"><label for="artist_lastname">artist_lastname</label></div></td>
<td><input id="artist_lastname" name="artist_lastname" type="text" size="25" value="" maxlength="30"></td></tr><tr><td width = "150"><div align="right"></div></td>
<input id="$thumb_image_location" name="$thumb_image_location" type="hidden" size="25" value="" maxlength="30">
  <td> </td>
</tr><tr><td width = "150"><div align="right"><label for="artist_about">artist_about</label></div></td>

<td><textarea id="artist_about" name="artist_about" rows="4" cols="40"></textarea></td></tr><tr><td width = "150"><div align="right"><label for="artist_descript">artist_descript</label></div></td>
<td><textarea id="artist_descript" name="artist_descript" rows="4" cols="40"></textarea></td></tr><tr><td width = "150"><div align="right"><label for="artist_timestamp">artist_timestamp</label></div></td>
<td><input id="artist_timestamp" name="artist_timestamp" type="text" size="25" value="" maxlength="255"></td></tr><tr><td width="150"></td><td>
<input type="submit" name="AddDetails" value="Add"></td>
</tr></table></form>
</body>
</html>

Thanks for the reply, so glad the image path goes in!

Now I cant work out why the user data isnt being inserted. Thanks again its ok if you cant get back, I dont blame you for this mass mashup of scripts!

MadTechie · July 12, 2009

You put the query in the thumbnail section not the upload

see here (untested)

<?php
error_reporting(E_ALL ^ E_NOTICE);
session_start(); //Do not remove this
//only assign a new timestamp if the session variable is empty
if (! isset($_SESSION['random_key']) || strlen($_SESSION['random_key']) == 0) {
    $_SESSION['random_key'] = strtotime(date('Y-m-d H:i:s')); //assign the timestamp to the session variable
    $_SESSION['user_file_ext'] = "";
}
#########################################################################################################
# CONSTANTS                                                                        #
# You can alter the options below                                                      #
#########################################################################################################
$upload_dir = "images"; // The directory for the images to be saved in
$upload_path = $upload_dir . "/"; // The path to where the image will be saved
$large_image_prefix = "resize_"; // The prefix name to large image
$thumb_image_prefix = "artist_pic_"; // The prefix name to the thumb image
$large_image_name = $large_image_prefix . $_SESSION['random_key']; // New name of the large image (append the timestamp to the filename)
$thumb_image_name = $thumb_image_prefix . $_SESSION['random_key']; // New name of the thumbnail image (append the timestamp to the filename)
$max_file = "3"; // Maximum file size in MB
$max_width = "500"; // Max width allowed for the large image
$thumb_width = "100"; // Width of thumbnail image
$thumb_height = "100"; // Height of thumbnail image
// Only one of these image types should be allowed for upload
$allowed_image_types = array('image/pjpeg' => "jpg" , 'image/jpeg' => "jpg" , 'image/jpg' => "jpg" , 'image/png' => "png" , 'image/x-png' => "png" , 'image/gif' => "gif");
$allowed_image_ext = array_unique($allowed_image_types); // do not change this
$image_ext = ""; // initialise variable, do not change this.
foreach ($allowed_image_ext as $mime_type => $ext) {
    $image_ext .= strtoupper($ext) . " ";
}
##########################################################################################################
# IMAGE FUNCTIONS                                                                   #
# You do not need to alter these functions                                                 #
##########################################################################################################
function resizeImage ($image, $width, $height, $scale)
{
    list ($imagewidth, $imageheight, $imageType) = getimagesize($image);
    $imageType = image_type_to_mime_type($imageType);
    $newImageWidth = ceil($width * $scale);
    $newImageHeight = ceil($height * $scale);
    $newImage = imagecreatetruecolor($newImageWidth, $newImageHeight);
    switch ($imageType) {
        case "image/gif":
            $source = imagecreatefromgif($image);
            break;
        case "image/pjpeg":
        case "image/jpeg":
        case "image/jpg":
            $source = imagecreatefromjpeg($image);
            break;
        case "image/png":
        case "image/x-png":
            $source = imagecreatefrompng($image);
            break;
    }
    imagecopyresampled($newImage, $source, 0, 0, 0, 0, $newImageWidth, $newImageHeight, $width, $height);
    switch ($imageType) {
        case "image/gif":
            imagegif($newImage, $image);
            break;
        case "image/pjpeg":
        case "image/jpeg":
        case "image/jpg":
            imagejpeg($newImage, $image, 90);
            break;
        case "image/png":
        case "image/x-png":
            imagepng($newImage, $image);
            break;
    }
    chmod($image, 0777);
    return $image;
}
//You do not need to alter these functions
function resizeThumbnailImage ($thumb_image_name, $image, $width, $height, $start_width, $start_height, $scale)
{
    list ($imagewidth, $imageheight, $imageType) = getimagesize($image);
    $imageType = image_type_to_mime_type($imageType);
    $newImageWidth = ceil($width * $scale);
    $newImageHeight = ceil($height * $scale);
    $newImage = imagecreatetruecolor($newImageWidth, $newImageHeight);
    switch ($imageType) {
        case "image/gif":
            $source = imagecreatefromgif($image);
            break;
        case "image/pjpeg":
        case "image/jpeg":
        case "image/jpg":
            $source = imagecreatefromjpeg($image);
            break;
        case "image/png":
        case "image/x-png":
            $source = imagecreatefrompng($image);
            break;
    }
    imagecopyresampled($newImage, $source, 0, 0, $start_width, $start_height, $newImageWidth, $newImageHeight, $width, $height);
    switch ($imageType) {
        case "image/gif":
            imagegif($newImage, $thumb_image_name);
            break;
        case "image/pjpeg":
        case "image/jpeg":
        case "image/jpg":
            imagejpeg($newImage, $thumb_image_name, 90);
            break;
        case "image/png":
        case "image/x-png":
            imagepng($newImage, $thumb_image_name);
            break;
    }
    chmod($thumb_image_name, 0777);
    return $thumb_image_name;
}
//You do not need to alter these functions
function getHeight ($image)
{
    $size = getimagesize($image);
    $height = $size[1];
    return $height;
}
//You do not need to alter these functions
function getWidth ($image)
{
    $size = getimagesize($image);
    $width = $size[0];
    return $width;
}
//Image Locations
$large_image_location = $upload_path . $large_image_name . $_SESSION['user_file_ext'];
$thumb_image_location = $upload_path . $thumb_image_name . $_SESSION['user_file_ext'];
//Create the upload directory with the right permissions if it doesn't exist
if (! is_dir($upload_dir)) {
    mkdir($upload_dir, 0777);
    chmod($upload_dir, 0777);
}
//Check to see if any images with the same name already exist
if (file_exists($large_image_location)) {
    if (file_exists($thumb_image_location)) {
        $thumb_photo_exists = "<img src=\"" . $upload_path . $thumb_image_name . $_SESSION['user_file_ext'] . "\" alt=\"Thumbnail Image\"/>";
    } else {
        $thumb_photo_exists = "";
    }
    $large_photo_exists = "<img src=\"" . $upload_path . $large_image_name . $_SESSION['user_file_ext'] . "\" alt=\"Large Image\"/>";
} else {
    $large_photo_exists = "";
    $thumb_photo_exists = "";
}
if (! empty($_FILES["image"]['tmp_name'])) {
    //Get the file information
    $userfile_name = $_FILES['image']['name'];
    $userfile_tmp = $_FILES['image']['tmp_name'];
    $userfile_size = $_FILES['image']['size'];
    $userfile_type = $_FILES['image']['type'];
    $filename = basename($_FILES['image']['name']);
    $file_ext = strtolower(substr($filename, strrpos($filename, '.') + 1));
    //Only process if the file is a JPG, PNG or GIF and below the allowed limit
    if ((! empty($_FILES["image"])) && ($_FILES['image']['error'] == 0)) {
        foreach ($allowed_image_types as $mime_type => $ext) {
            //loop through the specified image types and if they match the extension then break out
            //everything is ok so go and check file size
            if ($file_ext == $ext && $userfile_type == $mime_type) {
                $error = "";
                break;
            } else {
                $error = "Only <strong>" . $image_ext . "</strong> images accepted for upload<br />";
            }
        }
        //check if the file size is above the allowed limit
        if ($userfile_size > ($max_file * 1048576)) {
            $error .= "Images must be under " . $max_file . "MB in size";
        }
    } else {
        $error = "Select an image for upload";
    }
    //Everything is ok, so we can upload the image.
    if (strlen($error) == 0) {
        if (isset($_FILES['image']['name'])) {
            //this file could now has an unknown file extension (we hope it's one of the ones set above!)
            $large_image_location = $large_image_location . "." . $file_ext;
            $thumb_image_location = $thumb_image_location . "." . $file_ext;
            //put the file ext in the session so we know what file to look for once its uploaded
            $_SESSION['user_file_ext'] = "." . $file_ext;
            move_uploaded_file($userfile_tmp, $large_image_location);
            chmod($large_image_location, 0777);
            $width = getWidth($large_image_location);
            $height = getHeight($large_image_location);
            //Scale the image if it is greater than the width set above
            if ($width > $max_width) {
                $scale = $max_width / $width;
                $uploaded = resizeImage($large_image_location, $width, $height, $scale);
            } else {
                $scale = 1;
                $uploaded = resizeImage($large_image_location, $width, $height, $scale);
            }
            //Delete the thumbnail file so the user can create a new one
            if (file_exists($thumb_image_location)) {
                unlink($thumb_image_location);
            }
        }
        
        include ("connect.php");
        $artist_firstname = $_POST['artist_firstname'];
        $artist_lastname = $_POST['artist_lastname'];
        $artist_about = $_POST['artist_about'];
        $artist_descript = $_POST['artist_descript'];
        $artist_timestamp = $_POST['artist_timestamp'];
        //SQL INJECTION protection to be added
        $query = "INSERT INTO artists (id, artist_firstname, artist_lastname, thumb_image_location, artist_about, artist_descript, artist_timestamp)
    VALUES ('', '$artist_firstname', '$artist_lastname', '$thumb_image_location', '$artist_about', '$artist_descript', '$artist_timestamp')";
        $results = mysql_query($query) or die("Could not execute query : $query." . mysql_error());
        if ($results)
        {
         //Refresh the page to show the new uploaded image
        	header("location:" . $_SERVER["PHP_SELF"]);
        	exit();
    	}else{
        	echo "Details Failed to be added.";
        	exit();
    	}
    }
}
if (isset($_POST["upload_thumbnail"]) && strlen($large_photo_exists) > 0) {
    //Get the new coordinates to crop the image.
    $x1 = $_POST["x1"];
    $y1 = $_POST["y1"];
    $x2 = $_POST["x2"];
    $y2 = $_POST["y2"];
    $w = $_POST["w"];
    $h = $_POST["h"];
    //Scale the image to the thumb_width set above
    $scale = $thumb_width / $w;
    $cropped = resizeThumbnailImage($thumb_image_location, $large_image_location, $w, $h, $x1, $y1, $scale);
    //Reload the page again to view the thumbnail
header("location:" . $_SERVER["PHP_SELF"]);
    exit();
}
if ($_GET['a'] == "delete" && strlen($_GET['t']) > 0) {
    //get the file locations 
    $large_image_location = $upload_path . $large_image_prefix . $_GET['t'];
    $thumb_image_location = $upload_path . $thumb_image_prefix . $_GET['t'];
    if (file_exists($large_image_location)) {
        unlink($large_image_location);
    }
    if (file_exists($thumb_image_location)) {
        unlink($thumb_image_location);
    }
    header("location:" . $_SERVER["PHP_SELF"]);
    exit();
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="generator" content="WebMotionUK" />
<title>WebMotionUK - PHP & Jquery image upload & crop</title>
<script type="text/javascript" src="js/jquery-pack.js"></script>
<script type="text/javascript" src="js/jquery.imgareaselect.min.js"></script>
</head>
<body>
<!--
* Copyright (c) 2008 http://www.webmotionuk.com / http://www.webmotionuk.co.uk
* Date: 2008-11-21
* Ver 1.2
* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
* ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
* WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED.
* IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT,
* INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
* PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
* INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT,
* STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF
* THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*
* http://www.opensource.org/licenses/bsd-license.php
-->
<ul>
<li><a
	href="http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop/">Back
to project page</a></li>
<li><a href="http://www.webmotionuk.co.uk/jquery_upload_crop.zip">Download
Files</a></li>
</ul>
<?php
//Only display the javacript if an image has been uploaded
if (strlen($large_photo_exists) > 0) {
    $current_large_image_width = getWidth($large_image_location);
    $current_large_image_height = getHeight($large_image_location);
    ?>
<script type="text/javascript">
function preview(img, selection) {
   var scaleX = <?php
    echo $thumb_width;
    ?> / selection.width;
   var scaleY = <?php
    echo $thumb_height;
    ?> / selection.height;
   
   $('#thumbnail + div > img').css({
      width: Math.round(scaleX * <?php
    echo $current_large_image_width;
    ?>) + 'px',
      height: Math.round(scaleY * <?php
    echo $current_large_image_height;
    ?>) + 'px',
      marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
      marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
   });
   $('#x1').val(selection.x1);
   $('#y1').val(selection.y1);
   $('#x2').val(selection.x2);
   $('#y2').val(selection.y2);
   $('#w').val(selection.width);
   $('#h').val(selection.height);
}

$(document).ready(function () {
   $('#save_thumb').click(function() {
      var x1 = $('#x1').val();
      var y1 = $('#y1').val();
      var x2 = $('#x2').val();
      var y2 = $('#y2').val();
      var w = $('#w').val();
      var h = $('#h').val();
      if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || h==""){
         alert("You must make a selection first");
         return false;
      }else{
         return true;
      }
   });
});

$(window).load(function () {
   $('#thumbnail').imgAreaSelect({ aspectRatio: '1:<?php
    echo $thumb_height / $thumb_width;
    ?>', onSelectChange: preview });
});

</script>
<?php
}
?>
<h1>Photo Upload and Crop</h1>
<?php
//Display error message if there are any
if (strlen($error) > 0) {
    echo "<ul><li><strong>Error!</strong></li><li>" . $error . "</li></ul>";
}
if (strlen($large_photo_exists) > 0 && strlen($thumb_photo_exists) > 0) {
    echo $large_photo_exists . " " . $thumb_photo_exists;
    echo "<p><a href=\"" . $_SERVER["PHP_SELF"] . "?a=delete&t=" . $_SESSION['random_key'] . $_SESSION['user_file_ext'] . "\">Delete images</a></p>";
    echo "<p><a href=\"" . $_SERVER["PHP_SELF"] . "\">Upload another</a></p>";
    //Clear the time stamp session and user file extension
    $_SESSION['random_key'] = "";
    $_SESSION['user_file_ext'] = "";
} else {
    if (strlen($large_photo_exists) > 0) {
        ?>
      <h2>Create Thumbnail</h2>
<div align="center"><img src="<?php echo $upload_path . $large_image_name . $_SESSION['user_file_ext']; ?>" style="float: left; margin-right: 10px;" id="thumbnail" alt="Create Thumbnail" />
<div style="border:1px #e5e5e5 solid; float:left; position:relative; overflow:hidden; width:<?php echo $thumb_width;?>px; height:<?php echo $thumb_height; ?>px;">
<img src="<?php echo $upload_path . $large_image_name . $_SESSION['user_file_ext']; ?>"	style="position: relative;" alt="Thumbnail Preview" /></div>
<br style="clear: both;" />
<form name="thumbnail" 	action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="post">
    <input type="hidden" name="x1" value="" id="x1" />
    <input type="hidden" name="y1" value="" id="y1" />
    <input type="hidden" name="x2" value="" id="x2" />
    <input type="hidden" name="y2" value="" id="y2" />
    <input type="hidden" name="w" value="" id="w" />
    <input type="hidden" name="h" value="" id="h" />
    <input type="submit" name="upload_thumbnail" value="Save Thumbnail" id="save_thumb" />
</form>
</div>
<hr />
   <?php
    }
    ?>
   <h2>Upload Photo</h2>
<form name="photo" enctype="multipart/form-data"
action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="post">Photo <input type="file" name="image" size="30" />
<input type="submit" name="upload" value="Upload" onclick="form.action='add.php';" /></form>
<?php
}
?>
<!-- Copyright (c) 2008 http://www.webmotionuk.com -->
<form id="FormName" action="" method="post" name="FormName">
Photo <input type="file" name="image" size="30" />
<table width="448" border="0" cellspacing="2" cellpadding="0">
<tr>
	<td width="150">
	<div align="right"><label for="artist_firstname">artist_firstname</label></div>
	</td>
	<td><input id="artist_firstname" name="artist_firstname" type="text"
		size="25" value="" maxlength="30"></td>
</tr>
<tr>
	<td width="150">
	<div align="right"><label for="artist_lastname">artist_lastname</label></div>
	</td>
	<td><input id="artist_lastname" name="artist_lastname" type="text"
		size="25" value="" maxlength="30"></td>
</tr>
<tr>
	<td width="150">
	<div align="right"></div>
	</td>
	<input id="$thumb_image_location" name="$thumb_image_location"
		type="hidden" size="25" value="" maxlength="30">


	<td> </td>
</tr>
<tr>
	<td width="150">
	<div align="right"><label for="artist_about">artist_about</label></div>
	</td>

	<td><textarea id="artist_about" name="artist_about" rows="4" cols="40"></textarea></td>
</tr>
<tr>
	<td width="150">
	<div align="right"><label for="artist_descript">artist_descript</label></div>
	</td>
	<td><textarea id="artist_descript" name="artist_descript" rows="4"
		cols="40"></textarea></td>
</tr>
<tr>
	<td width="150">
	<div align="right"><label for="artist_timestamp">artist_timestamp</label></div>
	</td>
	<td><input id="artist_timestamp" name="artist_timestamp" type="text"
		size="25" value="" maxlength="255"></td>
</tr>
<tr>
	<td width="150"></td>
	<td><input type="submit" name="AddDetails" value="Add"></td>
</tr>
</table>
</form>
</body>
</html>

littlevisuals · July 12, 2009

You put the query in the thumbnail section not the upload

Ive tested the code snippet you sent and still not working, the user data is not working. The problem is in order to create a thumb to the directory, then a path to the database pressing Save Thumbnail is required. Once this has been pressed it says Details added and the form for the user data is not on the screen?

Are you up at 2:50 too? Are you the type of late coder who gets that productivity boost at 3am?

MadTechie · July 12, 2009

The last code i posted doesn't have "Details added" in it!

littlevisuals · July 12, 2009

The issue I think lies with this form create the thumbnail directory which inserts a path into the database.

<?php <form name="thumbnail"    action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="post">
    <input type="hidden" name="x1" value="" id="x1" />
    <input type="hidden" name="y1" value="" id="y1" />
    <input type="hidden" name="x2" value="" id="x2" />
    <input type="hidden" name="y2" value="" id="y2" />
    <input type="hidden" name="w" value="" id="w" />
    <input type="hidden" name="h" value="" id="h" />
    <input type="submit" name="upload_thumbnail" value="Save Thumbnail" id="save_thumb" />
</form> ?>

When Save thumbnail is clicked (which has to be to insert the data) doesnt give me the chance to use the form below to which inserts the user data

<?php <form name="photo" enctype="multipart/form-data"
   action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="post">Photo <input type="file" name="image" size="30" />
<input type="submit" name="upload" value="Upload" onclick="form.action='add.php';" /></form>
<?php
}
?>
<!-- Copyright (c) 2008 http://www.webmotionuk.com -->
<form id="FormName" action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="post" name="FormName">
Photo <input type="file" name="image" size="30" />
<table width="448" border="0" cellspacing="2" cellpadding="0">
   <tr>
      <td width="150">
      <div align="right"><label for="artist_firstname">artist_firstname</label></div>
      </td>
      <td><input id="artist_firstname" name="artist_firstname" type="text"
         size="25" value="" maxlength="30"></td>
   </tr>
   <tr>
      <td width="150">
      <div align="right"><label for="artist_lastname">artist_lastname</label></div>
      </td>
      <td><input id="artist_lastname" name="artist_lastname" type="text"
         size="25" value="" maxlength="30"></td>
   </tr>
   <tr>
      <td width="150">
      <div align="right"></div>
      </td>
      <input id="$thumb_image_location" name="$thumb_image_location"
         type="hidden" size="25" value="" maxlength="30">
      
      
      <td> </td>
   </tr>
   <tr>
      <td width="150">
      <div align="right"><label for="artist_about">artist_about</label></div>
      </td>

      <td><textarea id="artist_about" name="artist_about" rows="4" cols="40"></textarea></td>
   </tr>
   <tr>
      <td width="150">
      <div align="right"><label for="artist_descript">artist_descript</label></div>
      </td>
      <td><textarea id="artist_descript" name="artist_descript" rows="4"
         cols="40"></textarea></td>
   </tr>
   <tr>
      <td width="150">
      <div align="right"><label for="artist_timestamp">artist_timestamp</label></div>
      </td>
      <td><input id="artist_timestamp" name="artist_timestamp" type="text"
         size="25" value="" maxlength="255"></td>
   </tr>
   <tr>
      <td width="150"></td>
      <td><input type="submit" name="AddDetails" value="Add"></td>
   </tr>
</table>
</form> ?>

Any help would be greatly apprieciated!!

An idea of the how the form works is the demo where I got the script from

http://www.webmotionuk.co.uk/jquery/image_upload_crop.php

Even if its just to insert a code in the demo which adds artist name, desciption etc and saves the thumbnail and mage paths.

Cant imagine why they didnt include a method of inserting the paths into mysql. (which mad techie has managed to do, thanks!) Also could anybody point me to some php resources which might help?

littlevisuals · July 12, 2009

Sorry! Your right, but the last code you posted doesn't insert the user data :-[

Its got be the fact that you need to press save thumb to execute the script to create on into a directory. Could you show me how to do this as well as insert the rest of the user_data please?

MadTechie · July 12, 2009

I don't get why you need to insert the record when cropping it, why not on the upload ?

surely the cropping only effects the image directly and not the database!

Whats does my last code not do ?

littlevisuals · July 12, 2009

Hi thanks for getting back again.

The last script does not insert user data however it inserts the img path to mysql. But only when save thumbnail is pressed. When all the data is entered the add button with the user data refreshes the page but doesnt add records.

What I would like for it to do is when I upload a pic it lets me select a thumbnail. This thumb is the artists profile pic, which has two img paths, the thumb and the cropped original which is loaded into the browser. Also in the same table the rest of the artists data (first name, last name etc.)

To get it to upload the user data as in the table below i need to change the code.

<form id="FormName" action="" method="post" name="FormName">

to

<form id="FormName" action="added.php" method="post" name="FormName">

Which in turn does not add the image path. For some reason the code in add.php......

 include ("connect.php");
        $artist_firstname = $_POST['artist_firstname'];
        $artist_lastname = $_POST['artist_lastname'];
        $artist_about = $_POST['artist_about'];
        $artist_descript = $_POST['artist_descript'];
        $artist_timestamp = $_POST['artist_timestamp'];
        //SQL INJECTION protection to be added
        $query = "INSERT INTO artists (id, artist_firstname, artist_lastname, thumb_image_location, artist_about, artist_descript, artist_timestamp)
    VALUES ('', '$artist_firstname', '$artist_lastname', '$thumb_image_location', '$artist_about', '$artist_descript', '$artist_timestamp')";
        $results = mysql_query($query) or die("Could not execute query : $query." . mysql_error());
        if ($results)
        {

doesnt seem to insert the user data?

Sorry to use your time, im very grateful below are some images which might explain things a bit easier...

As you can see the data is never entered at the same time. The thumbnails path only gets entered when i click save thumnail. When I do that I cant enter the user data.

Below is the code you posted before but ive made it a bit clearer of what exact fields are going in

<?php
error_reporting(E_ALL ^ E_NOTICE);
session_start(); //Do not remove this
//only assign a new timestamp if the session variable is empty
if (! isset($_SESSION['random_key']) || strlen($_SESSION['random_key']) == 0) {
    $_SESSION['random_key'] = strtotime(date('Y-m-d H:i:s')); //assign the timestamp to the session variable
    $_SESSION['user_file_ext'] = "";
}
#########################################################################################################
# CONSTANTS                                                                        #
# You can alter the options below                                                      #
#########################################################################################################
$upload_dir = "images"; // The directory for the images to be saved in
$upload_path = $upload_dir . "/"; // The path to where the image will be saved
$large_image_prefix = "resize_"; // The prefix name to large image
$thumb_image_prefix = "artist_pic_"; // The prefix name to the thumb image
$large_image_name = $large_image_prefix . $_SESSION['random_key']; // New name of the large image (append the timestamp to the filename)
$thumb_image_name = $thumb_image_prefix . $_SESSION['random_key']; // New name of the thumbnail image (append the timestamp to the filename)
$max_file = "3"; // Maximum file size in MB
$max_width = "500"; // Max width allowed for the large image
$thumb_width = "100"; // Width of thumbnail image
$thumb_height = "100"; // Height of thumbnail image
// Only one of these image types should be allowed for upload
$allowed_image_types = array('image/pjpeg' => "jpg" , 'image/jpeg' => "jpg" , 'image/jpg' => "jpg" , 'image/png' => "png" , 'image/x-png' => "png" , 'image/gif' => "gif");
$allowed_image_ext = array_unique($allowed_image_types); // do not change this
$image_ext = ""; // initialise variable, do not change this.
foreach ($allowed_image_ext as $mime_type => $ext) {
    $image_ext .= strtoupper($ext) . " ";
}
##########################################################################################################
# IMAGE FUNCTIONS                                                                   #
# You do not need to alter these functions                                                 #
##########################################################################################################
function resizeImage ($image, $width, $height, $scale)
{
    list ($imagewidth, $imageheight, $imageType) = getimagesize($image);
    $imageType = image_type_to_mime_type($imageType);
    $newImageWidth = ceil($width * $scale);
    $newImageHeight = ceil($height * $scale);
    $newImage = imagecreatetruecolor($newImageWidth, $newImageHeight);
    switch ($imageType) {
        case "image/gif":
            $source = imagecreatefromgif($image);
            break;
        case "image/pjpeg":
        case "image/jpeg":
        case "image/jpg":
            $source = imagecreatefromjpeg($image);
            break;
        case "image/png":
        case "image/x-png":
            $source = imagecreatefrompng($image);
            break;
    }
    imagecopyresampled($newImage, $source, 0, 0, 0, 0, $newImageWidth, $newImageHeight, $width, $height);
    switch ($imageType) {
        case "image/gif":
            imagegif($newImage, $image);
            break;
        case "image/pjpeg":
        case "image/jpeg":
        case "image/jpg":
            imagejpeg($newImage, $image, 90);
            break;
        case "image/png":
        case "image/x-png":
            imagepng($newImage, $image);
            break;
    }
    chmod($image, 0777);
    return $image;
}
//You do not need to alter these functions
function resizeThumbnailImage ($thumb_image_name, $image, $width, $height, $start_width, $start_height, $scale)
{
    list ($imagewidth, $imageheight, $imageType) = getimagesize($image);
    $imageType = image_type_to_mime_type($imageType);
    $newImageWidth = ceil($width * $scale);
    $newImageHeight = ceil($height * $scale);
    $newImage = imagecreatetruecolor($newImageWidth, $newImageHeight);
    switch ($imageType) {
        case "image/gif":
            $source = imagecreatefromgif($image);
            break;
        case "image/pjpeg":
        case "image/jpeg":
        case "image/jpg":
            $source = imagecreatefromjpeg($image);
            break;
        case "image/png":
        case "image/x-png":
            $source = imagecreatefrompng($image);
            break;
    }
    imagecopyresampled($newImage, $source, 0, 0, $start_width, $start_height, $newImageWidth, $newImageHeight, $width, $height);
    switch ($imageType) {
        case "image/gif":
            imagegif($newImage, $thumb_image_name);
            break;
        case "image/pjpeg":
        case "image/jpeg":
        case "image/jpg":
            imagejpeg($newImage, $thumb_image_name, 90);
            break;
        case "image/png":
        case "image/x-png":
            imagepng($newImage, $thumb_image_name);
            break;
    }
    chmod($thumb_image_name, 0777);
    return $thumb_image_name;
}
//You do not need to alter these functions
function getHeight ($image)
{
    $size = getimagesize($image);
    $height = $size[1];
    return $height;
}
//You do not need to alter these functions
function getWidth ($image)
{
    $size = getimagesize($image);
    $width = $size[0];
    return $width;
}
//Image Locations
$large_image_location = $upload_path . $large_image_name . $_SESSION['user_file_ext'];
$thumb_image_location = $upload_path . $thumb_image_name . $_SESSION['user_file_ext'];
//Create the upload directory with the right permissions if it doesn't exist
if (! is_dir($upload_dir)) {
    mkdir($upload_dir, 0777);
    chmod($upload_dir, 0777);
}
//Check to see if any images with the same name already exist
if (file_exists($large_image_location)) {
    if (file_exists($thumb_image_location)) {
        $thumb_photo_exists = "<img src=\"" . $upload_path . $thumb_image_name . $_SESSION['user_file_ext'] . "\" alt=\"Thumbnail Image\"/>";
    } else {
        $thumb_photo_exists = "";
    }
    $large_photo_exists = "<img src=\"" . $upload_path . $large_image_name . $_SESSION['user_file_ext'] . "\" alt=\"Large Image\"/>";
} else {
    $large_photo_exists = "";
    $thumb_photo_exists = "";
}
if (! empty($_FILES["image"]['tmp_name'])) {
    //Get the file information
    $userfile_name = $_FILES['image']['name'];
    $userfile_tmp = $_FILES['image']['tmp_name'];
    $userfile_size = $_FILES['image']['size'];
    $userfile_type = $_FILES['image']['type'];
    $filename = basename($_FILES['image']['name']);
    $file_ext = strtolower(substr($filename, strrpos($filename, '.') + 1));
    //Only process if the file is a JPG, PNG or GIF and below the allowed limit
    if ((! empty($_FILES["image"])) && ($_FILES['image']['error'] == 0)) {
        foreach ($allowed_image_types as $mime_type => $ext) {
            //loop through the specified image types and if they match the extension then break out
            //everything is ok so go and check file size
            if ($file_ext == $ext && $userfile_type == $mime_type) {
                $error = "";
                break;
            } else {
                $error = "Only <strong>" . $image_ext . "</strong> images accepted for upload<br />";
            }
        }
        //check if the file size is above the allowed limit
        if ($userfile_size > ($max_file * 1048576)) {
            $error .= "Images must be under " . $max_file . "MB in size";
        }
    } else {
        $error = "Select an image for upload";
    }
    //Everything is ok, so we can upload the image.
    if (strlen($error) == 0) {
        if (isset($_FILES['image']['name'])) {
            //this file could now has an unknown file extension (we hope it's one of the ones set above!)
            $large_image_location = $large_image_location . "." . $file_ext;
            $thumb_image_location = $thumb_image_location . "." . $file_ext;
            //put the file ext in the session so we know what file to look for once its uploaded
            $_SESSION['user_file_ext'] = "." . $file_ext;
            move_uploaded_file($userfile_tmp, $large_image_location);
            chmod($large_image_location, 0777);
            $width = getWidth($large_image_location);
            $height = getHeight($large_image_location);
            //Scale the image if it is greater than the width set above
            if ($width > $max_width) {
                $scale = $max_width / $width;
                $uploaded = resizeImage($large_image_location, $width, $height, $scale);
            } else {
                $scale = 1;
                $uploaded = resizeImage($large_image_location, $width, $height, $scale);
            }
            //Delete the thumbnail file so the user can create a new one
            if (file_exists($thumb_image_location)) {
                unlink($thumb_image_location);
            }
        }
        
        include ("connect.php");
        $artist_firstname = $_POST['artist_firstname'];
        $artist_lastname = $_POST['artist_lastname'];
        $artist_about = $_POST['artist_about'];
        $artist_descript = $_POST['artist_descript'];
        $artist_timestamp = $_POST['artist_timestamp'];
        //SQL INJECTION protection to be added
        $query = "INSERT INTO artists (id, artist_firstname, artist_lastname, thumb_image_location, artist_about, artist_descript, artist_timestamp)
    VALUES ('', '$artist_firstname', '$artist_lastname', '$thumb_image_location', '$artist_about', '$artist_descript', '$artist_timestamp')";
        $results = mysql_query($query) or die("Could not execute query : $query." . mysql_error());
        if ($results)
        {
            //Refresh the page to show the new uploaded image
           header("location:" . $_SERVER["PHP_SELF"]);
           exit();
       }else{
           echo "Details Failed to be added.";
           exit();
       }
    }
}
if (isset($_POST["upload_thumbnail"]) && strlen($large_photo_exists) > 0) {
    //Get the new coordinates to crop the image.
    $x1 = $_POST["x1"];
    $y1 = $_POST["y1"];
    $x2 = $_POST["x2"];
    $y2 = $_POST["y2"];
    $w = $_POST["w"];
    $h = $_POST["h"];
    //Scale the image to the thumb_width set above
    $scale = $thumb_width / $w;
    $cropped = resizeThumbnailImage($thumb_image_location, $large_image_location, $w, $h, $x1, $y1, $scale);
    //Reload the page again to view the thumbnail
   header("location:" . $_SERVER["PHP_SELF"]);
    exit();
}
if ($_GET['a'] == "delete" && strlen($_GET['t']) > 0) {
    //get the file locations 
    $large_image_location = $upload_path . $large_image_prefix . $_GET['t'];
    $thumb_image_location = $upload_path . $thumb_image_prefix . $_GET['t'];
    if (file_exists($large_image_location)) {
        unlink($large_image_location);
    }
    if (file_exists($thumb_image_location)) {
        unlink($thumb_image_location);
    }
    
    exit();
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="generator" content="WebMotionUK" />
<title>WebMotionUK - PHP & Jquery image upload & crop</title>
<script type="text/javascript" src="js/jquery-pack.js"></script>
<script type="text/javascript" src="js/jquery.imgareaselect.min.js"></script>
</head>
<body>


<?php
//Only display the javacript if an image has been uploaded
if (strlen($large_photo_exists) > 0) {
    $current_large_image_width = getWidth($large_image_location);
    $current_large_image_height = getHeight($large_image_location);
    ?>
<script type="text/javascript">
function preview(img, selection) {
   var scaleX = <?php
    echo $thumb_width;
    ?> / selection.width;
   var scaleY = <?php
    echo $thumb_height;
    ?> / selection.height;
   
   $('#thumbnail + div > img').css({
      width: Math.round(scaleX * <?php
    echo $current_large_image_width;
    ?>) + 'px',
      height: Math.round(scaleY * <?php
    echo $current_large_image_height;
    ?>) + 'px',
      marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
      marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
   });
   $('#x1').val(selection.x1);
   $('#y1').val(selection.y1);
   $('#x2').val(selection.x2);
   $('#y2').val(selection.y2);
   $('#w').val(selection.width);
   $('#h').val(selection.height);
}

$(document).ready(function () {
   $('#save_thumb').click(function() {
      var x1 = $('#x1').val();
      var y1 = $('#y1').val();
      var x2 = $('#x2').val();
      var y2 = $('#y2').val();
      var w = $('#w').val();
      var h = $('#h').val();
      if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || h==""){
         alert("You must make a selection first");
         return false;
      }else{
         return true;
      }
   });
});

$(window).load(function () {
   $('#thumbnail').imgAreaSelect({ aspectRatio: '1:<?php
    echo $thumb_height / $thumb_width;
    ?>', onSelectChange: preview });
});

</script>
<?php
}
?>
<h1>Add Artist</h1>
<?php
//Display error message if there are any
if (strlen($error) > 0) {
    echo "<ul><li><strong>Error!</strong></li><li>" . $error . "</li></ul>";
}
if (strlen($large_photo_exists) > 0 && strlen($thumb_photo_exists) > 0) {
    echo $large_photo_exists . " " . $thumb_photo_exists;
    echo "<p><a href=\"" . $_SERVER["PHP_SELF"] . "?a=delete&t=" . $_SESSION['random_key'] . $_SESSION['user_file_ext'] . "\">Delete images</a></p>";
    echo "<p><a href=\"" . $_SERVER["PHP_SELF"] . "\">Upload another</a></p>";
    //Clear the time stamp session and user file extension
    $_SESSION['random_key'] = "";
    $_SESSION['user_file_ext'] = "";
} else {
    if (strlen($large_photo_exists) > 0) {
        ?>
      <h2>Create Thumbnail</h2>
<div align="center"><img src="<?php echo $upload_path . $large_image_name . $_SESSION['user_file_ext']; ?>" style="float: left; margin-right: 10px;" id="thumbnail" alt="Create Thumbnail" />
<div style="border:1px #e5e5e5 solid; float:left; position:relative; overflow:hidden; width:<?php echo $thumb_width;?>px; height:<?php echo $thumb_height; ?>px;">
<img src="<?php echo $upload_path . $large_image_name . $_SESSION['user_file_ext']; ?>"   style="position: relative;" alt="Thumbnail Preview" /></div>
<br style="clear: both;" />
<form name="thumbnail"    action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="post">
    <input type="hidden" name="x1" value="" id="x1" />
    <input type="hidden" name="y1" value="" id="y1" />
    <input type="hidden" name="x2" value="" id="x2" />
    <input type="hidden" name="y2" value="" id="y2" />
    <input type="hidden" name="w" value="" id="w" />
    <input type="hidden" name="h" value="" id="h" />
    <input type="submit" name="upload_thumbnail" value="Save Thumbnail" id="save_thumb" />
</form>
</div>
<hr />
   <?php
    }
    ?>
   <h2>Upload Profile pic to crop</h2>
   <form name="photo" enctype="multipart/form-data"
   action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="post">Photo <input type="file" name="image" size="30" />
<input type="submit" name="upload" value="Upload" onclick="<?php echo $_SERVER["PHP_SELF"]; ?>" /></form>
<?php
}
?>
<!-- Copyright (c) 2008 http://www.webmotionuk.com -->
<form id="FormName" action="" method="post" name="FormName">

<table width="448" border="0" cellspacing="2" cellpadding="0">
   <tr>
      <td width="150">
      <div align="right"><label for="artist_firstname">artist_firstname</label></div>
      </td>
      <td><input id="artist_firstname" name="artist_firstname" type="text"
         size="25" value="" maxlength="30"></td>
   </tr>
   <tr>
      <td width="150">
      <div align="right"><label for="artist_lastname">artist_lastname</label></div>
      </td>
      <td><input id="artist_lastname" name="artist_lastname" type="text"
         size="25" value="" maxlength="30"></td>
   </tr>
   <tr>
      <td width="150">
      <div align="right"></div>
      </td>
      <input id="$thumb_image_location" name="$thumb_image_location"
         type="hidden" size="25" value="Upload" maxlength="30">
      
      
      <td> </td>
   </tr>
   <tr>
      <td width="150">
      <div align="right"><label for="artist_about">artist_about</label></div>
      </td>

      <td><textarea id="artist_about" name="artist_about" rows="4" cols="40"></textarea></td>
   </tr>
   <tr>
      <td width="150">
      <div align="right"><label for="artist_descript">artist_descript</label></div>
      </td>
      <td><textarea id="artist_descript" name="artist_descript" rows="4"
         cols="40"></textarea></td>
   </tr>
   <tr>
      <td width="150">
      <div align="right"><label for="artist_timestamp">artist_timestamp</label></div>
      </td>
      <td><input id="artist_timestamp" name="artist_timestamp" type="text"
         size="25" value="" maxlength="255"></td>
   </tr>
   <tr>
      <td width="150"></td>

   </tr>
</table>
</form>
</body>
</html>

Thanks again man!

MadTechie · July 12, 2009

okay i played with it on my PC, i think this is what your after

<?php
/*
* Copyright (c) 2008 http://www.webmotionuk.com / http://www.webmotionuk.co.uk
* "PHP & Jquery image upload & crop"
* Date: 2008-11-21
* Ver 1.2
* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 
* ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 
* WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. 
* IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, 
* INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, 
* PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS 
* INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, 
* STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF 
* THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*
* http://www.opensource.org/licenses/bsd-license.php
*/
error_reporting (E_ALL ^ E_NOTICE);
session_start(); //Do not remove this
//only assign a new timestamp if the session variable is empty
if (!isset($_SESSION['random_key']) || strlen($_SESSION['random_key'])==0){
    $_SESSION['random_key'] = strtotime(date('Y-m-d H:i:s')); //assign the timestamp to the session variable
$_SESSION['user_file_ext']= "";
}
#########################################################################################################
# CONSTANTS																								#
# You can alter the options below																		#
#########################################################################################################
$upload_dir = "upload_pic"; 				// The directory for the images to be saved in
$upload_path = $upload_dir."/";				// The path to where the image will be saved
$large_image_prefix = "resize_"; 			// The prefix name to large image
$thumb_image_prefix = "thumbnail_";			// The prefix name to the thumb image
$large_image_name = $large_image_prefix.$_SESSION['random_key'];     // New name of the large image (append the timestamp to the filename)
$thumb_image_name = $thumb_image_prefix.$_SESSION['random_key'];     // New name of the thumbnail image (append the timestamp to the filename)
$max_file = "3"; 							// Maximum file size in MB
$max_width = "500";							// Max width allowed for the large image
$thumb_width = "100";						// Width of thumbnail image
$thumb_height = "100";						// Height of thumbnail image
// Only one of these image types should be allowed for upload
$allowed_image_types = array('image/pjpeg'=>"jpg",'image/jpeg'=>"jpg",'image/jpg'=>"jpg",'image/png'=>"png",'image/x-png'=>"png",'image/gif'=>"gif");
$allowed_image_ext = array_unique($allowed_image_types); // do not change this
$image_ext = "";	// initialise variable, do not change this.
foreach ($allowed_image_ext as $mime_type => $ext) {
    $image_ext.= strtoupper($ext)." ";
}


##########################################################################################################
# IMAGE FUNCTIONS																						 #
# You do not need to alter these functions																 #
##########################################################################################################
function resizeImage($image,$width,$height,$scale) {
list($imagewidth, $imageheight, $imageType) = getimagesize($image);
$imageType = image_type_to_mime_type($imageType);
$newImageWidth = ceil($width * $scale);
$newImageHeight = ceil($height * $scale);
$newImage = imagecreatetruecolor($newImageWidth,$newImageHeight);
switch($imageType) {
	case "image/gif":
		$source=imagecreatefromgif($image); 
		break;
    case "image/pjpeg":
	case "image/jpeg":
	case "image/jpg":
		$source=imagecreatefromjpeg($image); 
		break;
    case "image/png":
	case "image/x-png":
		$source=imagecreatefrompng($image); 
		break;
  	}
imagecopyresampled($newImage,$source,0,0,0,0,$newImageWidth,$newImageHeight,$width,$height);

switch($imageType) {
	case "image/gif":
  		imagegif($newImage,$image); 
		break;
      	case "image/pjpeg":
	case "image/jpeg":
	case "image/jpg":
  		imagejpeg($newImage,$image,90); 
		break;
	case "image/png":
	case "image/x-png":
		imagepng($newImage,$image);  
		break;
    }

chmod($image, 0777);
return $image;
}
//You do not need to alter these functions
function resizeThumbnailImage($thumb_image_name, $image, $width, $height, $start_width, $start_height, $scale){
list($imagewidth, $imageheight, $imageType) = getimagesize($image);
$imageType = image_type_to_mime_type($imageType);

$newImageWidth = ceil($width * $scale);
$newImageHeight = ceil($height * $scale);
$newImage = imagecreatetruecolor($newImageWidth,$newImageHeight);
switch($imageType) {
	case "image/gif":
		$source=imagecreatefromgif($image); 
		break;
    case "image/pjpeg":
	case "image/jpeg":
	case "image/jpg":
		$source=imagecreatefromjpeg($image); 
		break;
    case "image/png":
	case "image/x-png":
		$source=imagecreatefrompng($image); 
		break;
  	}
imagecopyresampled($newImage,$source,0,0,$start_width,$start_height,$newImageWidth,$newImageHeight,$width,$height);
switch($imageType) {
	case "image/gif":
  		imagegif($newImage,$thumb_image_name); 
		break;
      	case "image/pjpeg":
	case "image/jpeg":
	case "image/jpg":
  		imagejpeg($newImage,$thumb_image_name,90); 
		break;
	case "image/png":
	case "image/x-png":
		imagepng($newImage,$thumb_image_name);  
		break;
    }
chmod($thumb_image_name, 0777);
return $thumb_image_name;
}
//You do not need to alter these functions
function getHeight($image) {
$size = getimagesize($image);
$height = $size[1];
return $height;
}
//You do not need to alter these functions
function getWidth($image) {
$size = getimagesize($image);
$width = $size[0];
return $width;
}

//Image Locations
$large_image_location = $upload_path.$large_image_name.$_SESSION['user_file_ext'];
$thumb_image_location = $upload_path.$thumb_image_name.$_SESSION['user_file_ext'];

//Create the upload directory with the right permissions if it doesn't exist
if(!is_dir($upload_dir)){
mkdir($upload_dir, 0777);
chmod($upload_dir, 0777);
}

//Check to see if any images with the same name already exist
if (file_exists($large_image_location)){
if(file_exists($thumb_image_location)){
	$thumb_photo_exists = "<img src=\"".$upload_path.$thumb_image_name.$_SESSION['user_file_ext']."\" alt=\"Thumbnail Image\"/>";
}else{
	$thumb_photo_exists = "";
}
   	$large_photo_exists = "<img src=\"".$upload_path.$large_image_name.$_SESSION['user_file_ext']."\" alt=\"Large Image\"/>";
} else {
   	$large_photo_exists = "";
$thumb_photo_exists = "";
}

if (isset($_POST["upload"])) { 
//Get the file information
$userfile_name = $_FILES['image']['name'];
$userfile_tmp = $_FILES['image']['tmp_name'];
$userfile_size = $_FILES['image']['size'];
$userfile_type = $_FILES['image']['type'];
$filename = basename($_FILES['image']['name']);
$file_ext = strtolower(substr($filename, strrpos($filename, '.') + 1));

//Only process if the file is a JPG, PNG or GIF and below the allowed limit
if((!empty($_FILES["image"])) && ($_FILES['image']['error'] == 0)) {

	foreach ($allowed_image_types as $mime_type => $ext) {
		//loop through the specified image types and if they match the extension then break out
		//everything is ok so go and check file size
		if($file_ext==$ext && $userfile_type==$mime_type){
			$error = "";
			break;
		}else{
			$error = "Only <strong>".$image_ext."</strong> images accepted for upload<br />";
		}
	}
	//check if the file size is above the allowed limit
	if ($userfile_size > ($max_file*1048576)) {
		$error.= "Images must be under ".$max_file."MB in size";
	}

}else{
	$error= "Select an image for upload";
}
//Everything is ok, so we can upload the image.
if (strlen($error)==0){

	if (isset($_FILES['image']['name'])){
		//this file could now has an unknown file extension (we hope it's one of the ones set above!)
		$large_image_location = $large_image_location.".".$file_ext;
		$thumb_image_location = $thumb_image_location.".".$file_ext;

		//put the file ext in the session so we know what file to look for once its uploaded
		$_SESSION['user_file_ext']=".".$file_ext;

		move_uploaded_file($userfile_tmp, $large_image_location);
		chmod($large_image_location, 0777);

		$width = getWidth($large_image_location);
		$height = getHeight($large_image_location);
		//Scale the image if it is greater than the width set above
		if ($width > $max_width){
			$scale = $max_width/$width;
			$uploaded = resizeImage($large_image_location,$width,$height,$scale);
		}else{
			$scale = 1;
			$uploaded = resizeImage($large_image_location,$width,$height,$scale);
		}
		//Delete the thumbnail file so the user can create a new one
		if (file_exists($thumb_image_location)) {
			unlink($thumb_image_location);
		}
	}
	//Refresh the page to show the new uploaded image
	header("location:".$_SERVER["PHP_SELF"]);
	exit();
}
}

if (isset($_POST["upload_thumbnail"]) && strlen($large_photo_exists)>0) {
//Get the new coordinates to crop the image.
$x1 = $_POST["x1"];
$y1 = $_POST["y1"];
$x2 = $_POST["x2"];
$y2 = $_POST["y2"];
$w = $_POST["w"];
$h = $_POST["h"];
//Scale the image to the thumb_width set above
$scale = $thumb_width/$w;
$cropped = resizeThumbnailImage($thumb_image_location, $large_image_location,$w,$h,$x1,$y1,$scale);


//include("connect.php");
mysql_connect("127.0.0.1","root","");
mysql_select_db("test3");
$artist_firstname = $_POST['artist_firstname'];
$artist_lastname = $_POST['artist_lastname'];
$thumb_image_location = $_POST['image'];
$artist_about = $_POST['artist_about'];
$artist_descript = $_POST['artist_descript'];
$artist_timestamp = $_POST['artist_timestamp'];

$query = "INSERT INTO artists (id, artist_firstname, artist_lastname, thumb_image_location, artist_about, artist_descript, artist_timestamp)
VALUES ('', '$artist_firstname', '$artist_lastname', '$thumb_image_location', '$artist_about', '$artist_descript', '$artist_timestamp')";

  

$results = mysql_query($query) or die 
("Could not execute query : $query." . mysql_error());

if ($results)
{
echo "Details added.";
}
mysql_close();


//Reload the page again to view the thumbnail
header("location:".$_SERVER["PHP_SELF"]);
exit();
}


if ($_GET['a']=="delete" && strlen($_GET['t'])>0){
//get the file locations 
$large_image_location = $upload_path.$large_image_prefix.$_GET['t'];
$thumb_image_location = $upload_path.$thumb_image_prefix.$_GET['t'];
if (file_exists($large_image_location)) {
	unlink($large_image_location);
}
if (file_exists($thumb_image_location)) {
	unlink($thumb_image_location);
}
header("location:".$_SERVER["PHP_SELF"]);
exit(); 
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="generator" content="WebMotionUK" />
<title>WebMotionUK - PHP & Jquery image upload & crop</title>
<script type="text/javascript" src="js/jquery-pack.js"></script>
<script type="text/javascript" src="js/jquery.imgareaselect.min.js"></script>
</head>
<body>
<!-- 
* Copyright (c) 2008 http://www.webmotionuk.com / http://www.webmotionuk.co.uk
* Date: 2008-11-21
* "PHP & Jquery image upload & crop"
* Ver 1.2
* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 
* ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 
* WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. 
* IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, 
* INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, 
* PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS 
* INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, 
* STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF 
* THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*
* http://www.opensource.org/licenses/bsd-license.php
-->
<ul>
<li><a href="http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop/">Back to project page</a></li>
<li><a href="http://www.webmotionuk.co.uk/jquery_upload_crop.zip">Download Files</a></li>
</ul>
<?php
//Only display the javacript if an image has been uploaded
if(strlen($large_photo_exists)>0){
$current_large_image_width = getWidth($large_image_location);
$current_large_image_height = getHeight($large_image_location);?>
<script type="text/javascript">
function preview(img, selection) { 
var scaleX = <?php echo $thumb_width;?> / selection.width; 
var scaleY = <?php echo $thumb_height;?> / selection.height; 

$('#thumbnail + div > img').css({ 
	width: Math.round(scaleX * <?php echo $current_large_image_width;?>) + 'px', 
	height: Math.round(scaleY * <?php echo $current_large_image_height;?>) + 'px',
	marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', 
	marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' 
});
$('#x1').val(selection.x1);
$('#y1').val(selection.y1);
$('#x2').val(selection.x2);
$('#y2').val(selection.y2);
$('#w').val(selection.width);
$('#h').val(selection.height);
} 

$(document).ready(function () { 
$('#save_thumb').click(function() {
	var x1 = $('#x1').val();
	var y1 = $('#y1').val();
	var x2 = $('#x2').val();
	var y2 = $('#y2').val();
	var w = $('#w').val();
	var h = $('#h').val();
	if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || h==""){
		alert("You must make a selection first");
		return false;
	}else{
		return true;
	}
});
}); 

$(window).load(function () { 
$('#thumbnail').imgAreaSelect({ aspectRatio: '1:<?php echo $thumb_height/$thumb_width;?>', onSelectChange: preview }); 
});

</script>
<?php }?>
<h1>Photo Upload and Crop</h1>
<?php
//Display error message if there are any
if(strlen($error)>0){
echo "<ul><li><strong>Error!</strong></li><li>".$error."</li></ul>";
}
if(strlen($large_photo_exists)>0 && strlen($thumb_photo_exists)>0){
echo $large_photo_exists." ".$thumb_photo_exists;
echo "<p><a href=\"".$_SERVER["PHP_SELF"]."?a=delete&t=".$_SESSION['random_key'].$_SESSION['user_file_ext']."\">Delete images</a></p>";
echo "<p><a href=\"".$_SERVER["PHP_SELF"]."\">Upload another</a></p>";
//Clear the time stamp session and user file extension
$_SESSION['random_key']= "";
$_SESSION['user_file_ext']= "";
}else{
	if(strlen($large_photo_exists)>0){?>
	<h2>Create Thumbnail</h2>
	<div align="center">
		<img src="<?php echo $upload_path.$large_image_name.$_SESSION['user_file_ext'];?>" style="float: left; margin-right: 10px;" id="thumbnail" alt="Create Thumbnail" />
		<div style="border:1px #e5e5e5 solid; float:left; position:relative; overflow:hidden; width:<?php echo $thumb_width;?>px; height:<?php echo $thumb_height;?>px;">
			<img src="<?php echo $upload_path.$large_image_name.$_SESSION['user_file_ext'];?>" style="position: relative;" alt="Thumbnail Preview" />
		</div>
		<br style="clear:both;"/>
		<form name="thumbnail" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
			<input type="hidden" name="x1" value="" id="x1" />
			<input type="hidden" name="y1" value="" id="y1" />
			<input type="hidden" name="x2" value="" id="x2" />
			<input type="hidden" name="y2" value="" id="y2" />
			<input type="hidden" name="w" value="" id="w" />
			<input type="hidden" name="h" value="" id="h" />
			<input type="hidden" name="image" value="<?php echo $upload_path.$large_image_name.$_SESSION['user_file_ext']; ?>" />
			<input type="submit" name="upload_thumbnail" value="Save Thumbnail" id="save_thumb" />


<table width="448" border="0" cellspacing="2" cellpadding="0">
<tr><td width = "150"><div align="right"><label for="artist_firstname">artist_firstname</label></div></td>
<td><input id="artist_firstname" name="artist_firstname" type="text" size="25" value="" maxlength="30"></td></tr><tr><td width = "150"><div align="right"><label for="artist_lastname">artist_lastname</label></div></td>
<td><input id="artist_lastname" name="artist_lastname" type="text" size="25" value="" maxlength="30"></td></tr><tr><td width = "150"><div align="right"></div></td>
<input id="$thumb_image_location" name="$thumb_image_location" type="hidden" size="25" value="" maxlength="30">
  <td> </td>
</tr><tr><td width = "150"><div align="right"><label for="artist_about">artist_about</label></div></td>

<td><textarea id="artist_about" name="artist_about" rows="4" cols="40"></textarea></td></tr><tr><td width = "150"><div align="right"><label for="artist_descript">artist_descript</label></div></td>
<td><textarea id="artist_descript" name="artist_descript" rows="4" cols="40"></textarea></td></tr><tr><td width = "150"><div align="right"><label for="artist_timestamp">artist_timestamp</label></div></td>
<td><input id="artist_timestamp" name="artist_timestamp" type="text" size="25" value="" maxlength="255"></td></tr></table>
		</form>
	</div>
<hr />
<?php 	} ?>
<h2>Upload Photo</h2>
<form name="photo" enctype="multipart/form-data" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
Photo <input type="file" name="image" size="30" /> <input type="submit" name="upload" value="Upload" />
</form>
<?php } ?>
<!-- Copyright (c) 2008 http://www.webmotionuk.com -->
</body>
</html>

littlevisuals · July 12, 2009

Wow, just wow!! It works perfectly! :D

Thankyou for taking the time and effort to help me

When i've finished the project I will be sure to buy you a beer/coffee, whats your poison?

MadTechie · July 12, 2009

I'm happy its working.. well I'm sipping my coffee as we speak.. so I'm good

Sign In

[SOLVED] Help modding Image resize/crop script to insert image path to mysql table?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information