title: PHP & JQuery Photo Upload and Crop Issues
body: <p>I am using pre made code (<a href="http://www.jqueryrain.com/?ckQjAttu" rel="nofollow">http://www.jqueryrain.com/?ckQjAttu</a>) to make a photo uploader and cropper. Obviously there code all works fine but all I want to add is: when the user selects a photo the form is automatically submitted. heres the current java script I am using to attempt this. </p>
  
  <pre><code>    &lt;form action="my_upload.php" enctype="multipart/form-data" method="post" 
      class="upload" name="upload"&gt;  
      &lt;input name="image" size="30" type="file" id="file"&gt;  
      &lt;input name="upload" type="submit" value="Edit Photo" id="upload"&gt;  
      &lt;/form&gt;  
      &lt;/div&gt;
      &lt;script type="text/javascript"&gt;
      $('form.upload').on('change', function() {
     document.upload.submit();
     });  
     &lt;/script&gt; 
  </code></pre>
  
  <p>This does submit the form and takes the user to 'my_upload.php' and normally when the photo is uploaded it appears on the page. However when it is uploaded like this nothing appears at all!! </p>
  
  <p>here is there php script ('my_upload.php') which have slightly edited for storing the photo and design of the page: </p>
  
  <pre><code>    &lt;?php
      require 'core.php';
      require 'connect.php';
      /*
      * Copyright (c) 2008 http://www.webmotionuk.com / http://www.webmotionuk.co.uk
      * "PHP &amp; Jquery image upload &amp; 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.
      *
      */
      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";                 // 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'=&gt;"jpg",'image/jpeg'=&gt;"jpg",'image/jpg'=&gt;"jpg",'image/png'=&gt;"png",'image/x-png'=&gt;"png",'image/gif'=&gt;"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 =&gt; $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 = "&lt;img src=\"".$upload_path.$thumb_image_name.$_SESSION['user_file_ext']."\" alt=\"Thumbnail Image\"/&gt;";
          }else{
              $thumb_photo_exists = "";
          }
          $large_photo_exists = "&lt;img src=\"".$upload_path.$large_image_name.$_SESSION['user_file_ext']."\" alt=\"Large Image\"/&gt;";
      } 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"])) &amp;&amp; ($_FILES['image']['error'] == 0)) {
  
              foreach ($allowed_image_types as $mime_type =&gt; $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 &amp;&amp; $userfile_type==$mime_type){
                      $error = "";
                      break;
                  }else{
                      $error = "Only &lt;strong&gt;".$image_ext."&lt;/strong&gt; images accepted for upload&lt;br /&gt;";
                  }
              }
              //check if the file size is above the allowed limit
              if ($userfile_size &gt; ($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 &gt; $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"]) &amp;&amp; strlen($large_photo_exists)&gt;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" &amp;&amp; strlen($_GET['t'])&gt;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(); 
      }
      ?&gt;
      &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
      &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
          &lt;meta name="generator" content="WebMotionUK" /&gt;
          &lt;title&gt;Get Profile Picture&lt;/title&gt;
          &lt;link rel="stylesheet" href="my_upload.css"&gt;
          &lt;script type="text/javascript" src="jquery-pack.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="
  
          jquery.imgareaselect.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;header&gt;
          &lt;div class="header"&gt;
          &lt;div class="image"&gt; &lt;a href="whosout.php"&gt; &lt;img class="logo" src="Logo.png"&gt; &lt;/a&gt;&lt;/div&gt;
          &lt;div class="form"&gt;
          &lt;/div&gt; &lt;!--end of div form--&gt;
          &lt;/div&gt; &lt;!--end of div header--&gt;
          &lt;/header&gt;
      &lt;body&gt;
      &lt;!-- 
      * Copyright (c) 2008 http://www.webmotionuk.com / http://www.webmotionuk.co.uk
      * Date: 2008-11-21
      * "PHP &amp; Jquery image upload &amp; 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.
      *
      --&gt;
      &lt;?php
      //Only display the javacript if an image has been uploaded
      if(strlen($large_photo_exists)&gt;0){
          $current_large_image_width = getWidth($large_image_location);
          $current_large_image_height = getHeight($large_image_location);?&gt;
      &lt;script type="text/javascript"&gt;
      function preview(img, selection) { 
          var scaleX = &lt;?php echo $thumb_width;?&gt; / selection.width; 
          var scaleY = &lt;?php echo $thumb_height;?&gt; / selection.height; 
  
          $('#thumbnail + div &gt; img').css({ 
              width: Math.round(scaleX * &lt;?php echo $current_large_image_width;?&gt;) + 'px', 
              height: Math.round(scaleY * &lt;?php echo $current_large_image_height;?&gt;) + '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:&lt;?php echo $thumb_height/$thumb_width;?&gt;', onSelectChange: preview }); 
      });
  
      &lt;/script&gt;
      &lt;?php }?&gt;   
      &lt;?php
      //Display error message if there are any
      if(strlen($error)&gt;0){
          echo "&lt;ul&gt;&lt;li&gt;&lt;strong&gt;Error!&lt;/strong&gt;&lt;/li&gt;&lt;li&gt;".$error."&lt;/li&gt;&lt;/ul&gt;";
      }
      if(strlen($large_photo_exists)&gt;0 &amp;&amp; strlen($thumb_photo_exists)&gt;0){
          echo $large_photo_exists."&amp;nbsp;".$thumb_photo_exists;
          $idPerson = getField('idPerson','person');
          $query = "UPDATE person SET pictureLocation = '".mysql_real_escape_string($thumb_image_name)."', gotData = '".mysql_real_escape_string('1')."' WHERE idPerson = '$idPerson'"; 
          if($query_run = mysql_query($query)){
  
          }
  
          //Clear the time stamp session and user file extension
          $_SESSION['random_key']= "";
          $_SESSION['user_file_ext']= "";
      }else{
              if(strlen($large_photo_exists)&gt;0){?&gt;
              &lt;div class="allData"&gt;
              &lt;div class="titleAndForm"&gt;
              &lt;p id="title"&gt; Upload a Photo&lt;/p&gt;
              &lt;p id="step"&gt; Step 2/4 &lt;/p&gt; 
                  &lt;img src="&lt;?php echo $upload_path.$large_image_name.$_SESSION['user_file_ext'];?&gt;" id="thumbnail" alt="Create Thumbnail" /&gt;
                  &lt;div style="display: none"&gt;
                      &lt;img src="&lt;?php echo $upload_path.$large_image_name.$_SESSION['user_file_ext'];?&gt;" style="position: relative;" alt="Thumbnail Preview" /&gt;
                  &lt;/div&gt;
                  &lt;br style="clear:both;"/&gt;
                  &lt;form name="thumbnail" action="&lt;?php echo $_SERVER["PHP_SELF"];?&gt;" method="post"&gt;
                      &lt;input type="hidden" name="x1" value="" id="x1" /&gt;
                      &lt;input type="hidden" name="y1" value="" id="y1" /&gt;
                      &lt;input type="hidden" name="x2" value="" id="x2" /&gt;
                      &lt;input type="hidden" name="y2" value="" id="y2" /&gt;
                      &lt;input type="hidden" name="w" value="" id="w" /&gt;
                      &lt;input type="hidden" name="h" value="" id="h" /&gt;
                      &lt;input type="submit" name="upload_thumbnail" value="Save Thumbnail" id="save_thumb" /&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;?php   } ?&gt;
      &lt;?php } ?&gt;
      &lt;!-- Copyright (c) 2008 http://www.webmotionuk.com --&gt;
      &lt;/body&gt;
      &lt;/html&gt; 
  </code></pre>
  
  <p>Any ideas on why The photo isn't submitted properly when it is uploaded by js would be amazing! thanks in advance!</p>