As usual I am having a love hate relationship with jQuery and Ajax :)
I have a PHP file that uploads and resizes and image and stores the data in the database, which on its own works fine. I am now trying to do this through a jquery modal/dialog box using ajax but nothing happens and I cannot work out why (I have tried outputting to console.log but all I get is a blank line - there must be an easier way to debug but hey ho).
My image upload file is:
<?php
require_once('../inc/core.php');
$objProductImage = new ProductImages;
$msg = '';
$errors = 0;
$large_max = 800;
$medium_max_width = 290;
$category_thumb_max_height = 146;
$product_thumb_max_height = 53;
define ("MAX_SIZE","2000");
function getExtension($str) {
$i = strrpos($str,".");
if (!$i) { return ""; }
$l = strlen($str) - $i;
$ext = substr($str,$i+1,$l);
return $ext;
}
if(isset($_POST['submit'])) {
$image = $_FILES["file"]["name"];
$uploadedfile = $_FILES['file']['tmp_name'];
if ($image) {
$filename = stripslashes($_FILES['file']['name']);
$extension = getExtension($filename);
$extension = strtolower($extension);
if (($extension != "jpg") && ($extension != "jpeg") && ($extension != "png") && ($extension != "gif")) {
$msg = '<p class="warning">Unknown Image extension</p>';
$errors = 1;
} else {
$file_size =filesize($_FILES['file']['tmp_name']);
if ($file_size > MAX_SIZE*1024) {
$msg ='<p class="warning">You have exceeded the size limit!</p>';
$errors = 1;
}
if($extension == "jpg" || $extension == "jpeg" ) {
$uploadedfile = $_FILES['file']['tmp_name'];
$src = imagecreatefromjpeg($uploadedfile);
} elseif($extension == "png") {
$uploadedfile = $_FILES['file']['tmp_name'];
$src = imagecreatefrompng($uploadedfile);
} else {
$src = imagecreatefromgif($uploadedfile);
}
$size = getimagesize($uploadedfile);
$curr_width = $size[0];
$curr_height = $size[1];
// Resize main large image
if ($curr_width > $curr_height && $curr_width > $large_max) {
$new_width = $large_max;
$new_height=($curr_height/$curr_width)*$new_width;
} elseif ($curr_height > $curr_width && $curr_height > $large_max) {
$new_height = $large_max;
$new_width = ($curr_width/$curr_height)*$new_height;
} else {
$new_width = $curr_width;
$new_height = $curr_height;
}
$tmp_large = imagecreatetruecolor($new_width,$new_height);
// Resize to Medium image for product detail page
if ($curr_width > $medium_max_width) {
$new_med_width = $medium_max_width;
$new_med_height=($curr_height/$curr_width)*$new_med_width;
} else {
$new_med_width = $curr_width;
$new_med_height = $curr_height;
}
$tmp_medium=imagecreatetruecolor($new_med_width,$new_med_height);
// Resize to Thumbnail for product listings (i.e. home and categpry page)
if ($curr_height > $category_thumb_max_height) {
$new_cat_height = $category_thumb_max_height;
$new_cat_width = ($curr_width/$curr_height)*$new_cat_height;
} else {
$new_cat_width = $curr_width;
$new_cat_height = $curr_height;
}
$tmp_category_thumb=imagecreatetruecolor($new_cat_width,$new_cat_height);
// Resize to smallest Thumbnail for product details page
if ($curr_height > $product_thumb_max_height) {
$new_prod_height = $product_thumb_max_height;
$new_prod_width = ($curr_width/$curr_height)*$new_prod_height;
} else {
$new_prod_width = $curr_width;
$new_prod_height = $curr_height;
}
$tmp_product_thumb=imagecreatetruecolor($new_prod_width,$new_prod_height);
imagecopyresampled($tmp_large,$src,0,0,0,0,$new_width,$new_height,$curr_width,$curr_height);
imagecopyresampled($tmp_medium,$src,0,0,0,0,$new_med_width,$new_med_height,$curr_width,$curr_height);
imagecopyresampled($tmp_category_thumb,$src,0,0,0,0,$new_cat_width,$new_cat_height,$curr_width,$curr_height);
imagecopyresampled($tmp_product_thumb,$src,0,0,0,0,$new_prod_width,$new_prod_height,$curr_width,$curr_height);
$large_filename = "../product-images/large/". $_FILES['file']['name'];
$medium_filename = "../product-images/medium/". $_FILES['file']['name'];
$category_thumb_filename = "../product-images/category-thumbs/". $_FILES['file']['name'];
$product_thumb_filename = "../product-images/product-thumbs/". $_FILES['file']['name'];
imagejpeg($tmp_large,$large_filename,100);
imagejpeg($tmp_medium,$medium_filename,100);
imagejpeg($tmp_category_thumb,$category_thumb_filename,100);
imagejpeg($tmp_product_thumb,$product_thumb_filename,100);
imagedestroy($src);
imagedestroy($tmp_large);
imagedestroy($tmp_medium);
imagedestroy($tmp_category_thumb);
imagedestroy($tmp_product_thumb);
}
//If no errors registred, print the success message
if(!$errors) {
if (!empty($_POST['product_id'])) {
$objProductImage->product_id = $_POST['product_id'];
$objProductImage->image = $_FILES['file']['name'];
$objProductImage->main_image = $_POST['main_image'];
if ($objProductImage->save_image()) {
$msg = '<p><b>Image Uploaded Successfully!</b></p>';
} else {
$msg = '<p><b>A problem occured saving your image</b></p>';
}
}
}
if (isset($_POST['action']) && $_POST['action'] == 'ajax') {
echo $msg;
}
}
}
?>
<?php if (empty($_POST) || $errors > 0) { ?>
<?php if ($errors > 0) { echo $msg; } ?>
<p>Maximum image size is <b>2mb</b></p>
<form method="post" action="upload-product-image.php" enctype="multipart/form-data" name="image_upload">
<input type="hidden" name="product_id" value="4">
<label for="image_filename">Image File: </label><input size="25" name="file" id="image_filename" type="file" />
<label for="main_image">Main Product Image</label><input type="checkbox" name="main_image" value="1">
<input type="submit" value="Upload" id="do_upload" name="submit"/>
</form>
<?php } else { echo $msg; } ?>
And my jquery / ajax is:
$('#do_upload').click(function(e) {
e.preventDefault();
$.ajax({
url: '/clients/whiting-heating/manage/upload-product-image.php',
data: $('#image-upload-form form').serialize() + '&action=ajax',
type: 'POST',
success: function(html) {
if (html) {
$('#image-upload-form form').prepend(html);
} else {
$('#image-upload-form form').prepend('<p>Error</p>');
}
}
});
});
The dialog opens as required so I don't think I need to post that code.
Can anyone help me please before I tear my hair out? :)
