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

Recommended Answers

All 3 Replies

Member Avatar

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.