title: Image preview before upload and crop
body: <p>I'm in the middle of making a form which allows the admins to upload an image. This image I would like them to be able to preview before they upload it. It will show as a specific size and they'll be able to click on the image to open up a in-page window to crop.</p>
  
  <p>JQuery Image Crop: <a href="http://jsfiddle.net/UydpR/2/" rel="nofollow">http://jsfiddle.net/UydpR/2/</a></p>
  
  <p>My Code, sorry I tried to make a fiddle but could not get it to work!</p>
  
  <pre><code>&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;link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /&gt;
  &lt;script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;meta charset=utf-8 /&gt;
  &lt;title&gt;Image Test&lt;/title&gt;
  &lt;!--[if IE]&gt;
    &lt;script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
  &lt;![endif]--&gt;
  &lt;style&gt;
    article, aside, figure, footer, header, hgroup, 
    menu, nav, section { display: block; }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;input type='file' onchange="readURL(this);" /&gt;
      &lt;img id="blah" src="#" alt="your image" /&gt;
  &lt;script type="text/javascript"&gt;
       function readURL(input) {
              if (input.files &amp;&amp; input.files[0]) {
                  var reader = new FileReader();
  
                  reader.onload = function (e) {
                      $('#blah')
                          .attr('src', e.target.result)
                          .width(150)
                          .height(200);
                  };
  
                  reader.readAsDataURL(input.files[0]);
              }
          }
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I also wish for something default to show instead of the no image found logo. I'll make one to say 'No Image Uploaded' or whatnot.</p>
  
  <p>Thank you in advanced for any help,
  Blessed Be,
  Tim</p>