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? :)

Member Avatar for stbuchok

In Chrome and IE use their developer toolbar, in Firfox use Firebug to debug the javascript. Also use fiddler to debug the information that is being posted.

I have already done all that and I am getting no errors but nothing being passed back either. I can't use Fiddler as I am on a mac

I resolved this by using ajaxForm instead

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.