title: Creating a dynamic image upload PHP
body: <p>I am wanting to allow a user to upload images dynamically and display them in some sort of reasonable view. I am not picky how it looks, just that it's functional. I stumbled onto YoxView and have been trying to use it. I followed the installation here: <a href="http://www.yoxigen.com/yoxview/usage.aspx#installation" rel="nofollow">http://www.yoxigen.com/yoxview/usage.aspx#installation</a></p>
  
  <p>However, I can't seem to get it to work properly. The images aren't uploading dynamically and they once the page is refreshed they are displaying the thumbnails, however, the thumbnails are the size of the uploaded image, not what I am telling them to resize to. (My thumbnails are being created in a folder <code>unit_images/thumbnails</code>. </p>
  
  <p>Furthermore, the CSS for the YoxView isn't getting displayed.</p>
  
  <p>Here is where the images are displayed on the page <code>unit_edit.php</code></p>
  
  <pre><code>&lt;div class="editunitimages"&gt;
          &lt;form id="imageform" method="post" enctype="multipart/form-data" action='upload.php?id=&lt;?php print $_GET['id']; ?&gt;' &gt;
              Upload image &lt;input type="file" name="photoimg" id="photoimg" /&gt;
          &lt;/form&gt;
  
          &lt;div id='preview'&gt;
          &lt;/div&gt;
          &lt;div id="unit_images"&gt;
              &lt;?php
                  require_once('config/db.php');
                  $con = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME);
                  $query = "SELECT id, image FROM images WHERE unit = ".$_GET['id']."";
                  $result = mysqli_query($con, $query);
                  echo '&lt;div class="yoxview"&gt;';
                  $i = 1;
                  while ($row = mysqli_fetch_assoc($result))
                  {
                      echo '&lt;a href="unit_images/'.$row['image'].'"&gt;&lt;img src="unit_images/thumbnails/'.$row['image'].'" alt="'.$i.'" title="image '.$i.'" /&gt;&lt;/a&gt;';
                      $i++;
                  }
                  echo '&lt;/div&gt;';
              ?&gt;
          &lt;/div&gt;
      &lt;/div&gt;  &lt;!-- end editunitimages --&gt;
  </code></pre>
  
  <p>I also have a style on the page for it</p>
  
  <pre><code>&lt;script type="text/javascript" src="yoxview/yoxview-init.js"&gt;&lt;/script&gt;
  &lt;style&gt;
      .preview{width:200px;border:solid 1px #dedede;padding:10px;}
      #preview{color:#cc0000;font-size:12px}
  &lt;/style&gt;
  </code></pre>
  
  <p>This is the JS i have for it on the same page </p>
  
  <p><em>Here I am getting a console error that says</em> <code>Uncaught Reference Error: options is not defined</code></p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function() 
  { 
      $("#thumbnails").yoxview([options]);
      $('#photoimg').live('change', function()    
      { 
  
          $("#preview").html('');
          $("#preview").html('&lt;img src="images/loader.gif" alt="Uploading...."/&gt;');
          $("#imageform").ajaxForm({
              target: '#preview'
          }).submit();
      });
  }); 
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is my <code>upload.php</code> file </p>
  
  <p><em>I notice that the <code>print_r('here');</code> is not displaying on the page, either. Which I assume is why my image thumbnails aren't being resized (they remain the same as the upload size)</em></p>
  
  <pre><code>  &lt;?php
  function resize_image($file, $w, $h, $crop=FALSE) {
  list($width, $height) = getimagesize($file);
  $r = $width / $height;
  if ($crop) {
      print_r('here');
      if ($width &gt; $height) {
          $width = ceil($width-($width*abs($r-$w/$h)));
      } else {
          $height = ceil($height-($height*abs($r-$w/$h)));
      }
      $newwidth = $w;
      $newheight = $h;
  } else {
      if ($w/$h &gt; $r) {
          $newwidth = $h*$r;
          $newheight = $h;
      } else {
          $newheight = $w/$r;
          $newwidth = $w;
      }
  }
  $src = imagecreatefromjpeg($file);
  $dst = imagecreatetruecolor($newwidth, $newheight);
  imagecopyresampled($dst, $src, 0, 0, 0, 0, $newwidth, $newheight, $width, $height);
  
  return $dst;
  }
  
  require_once('config/db.php');
  $con = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME);
  $query = "SELECT MAX(id) AS id FROM images";
  $result = mysqli_query($con, $query);
  while ($row = mysqli_fetch_assoc($result))
   { $image_id = $row['id']; $image_id++; }
  
  $path = "unit_images/";
  
  $valid_formats = array("jpg", "jpeg");
  if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
      {
          $name = strtolower($_FILES['photoimg']['name']);
          $size = $_FILES['photoimg']['size'];
  
          if(strlen($name))
              {
                  list($txt, $ext) = explode(".", $name);
                  if(in_array($ext,$valid_formats))
                  {
                  if($size&lt;((1024*1024)*5))
                      {
                          $actual_image_name = time().substr(str_replace(" ", "_", $txt), 5).".".$ext;
                          $actual_image_name = $image_id.'_'.$actual_image_name;
                          $tmp = $_FILES['photoimg']['tmp_name'];
                          if(move_uploaded_file($tmp, $path.$actual_image_name))
                              {
                                  $file = $path.$actual_image_name;
                                  $thumb = $path.'/thumbnails/'.$actual_image_name;
                                  if (!copy($file, $thumb)) { echo 'Failed to copy.'; }
                                  resize_image($thumb, 60, 40);
  
                                  $query = "INSERT INTO images(unit, image) VALUES(".$_GET['id'].",'".$actual_image_name."')";
                                  mysqli_query($con,$query);
                                  //echo "&lt;img src='unit_images/".$thumb."'  class='preview'&gt;";
                              }
                          else
                              echo "failed";
                      }
                      else
                      echo "Image file size max 1 MB";                    
                      }
                      else
                      echo "Invalid file format..";   
              }
  
          else
              echo "Please select image..!";
  
          exit;
      }
  ?&gt;
  </code></pre>