title: Javascript image upload and resize issue
body: <p>I have an image uploader which previews an image you select, allows you to resize, and then shows the resized version.</p>
  
  <p>The original code allowed you to resize a static image, so I've added the ability to upload an image to replace this static one. (#image-3).</p>
  
  <p>However, when you upload and resize, it still shows the static image on the resized version.</p>
  
  <p>I'm not entirely certain with Javascript, and would appreciate any help! Thank you.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
  
  
    $('#image-3').rcrop({
      minSize: [500, 500],
      preserveAspectRatio: true,
  
      preview: {
        display: true,
        size: [100, 100],
        wrapper: '#custom-preview-wrapper'
      }
    });
  
    function readURL(input) {
      if (input.files &amp;&amp; input.files[0]) {
        var reader = new FileReader();
  
        reader.onload = function(e) {
          $('#image-3').attr('src', e.target.result);
  
  
        }
  
        reader.readAsDataURL(input.files[0]);
  
        $('#image-3').on('rcrop-changed', function() {
          var srcOriginal = $(this).rcrop('getDataURL');
          var srcResized = $(this).rcrop('getDataURL', 50, 50);
  
          $('#cropped-original').append('&lt;img src="' + srcOriginal + '"&gt;');
          $('#cropped-resized').append('&lt;img src="' + srcResized + '"&gt;');
        });
  
  
      }
    }
  
    $("#imgInp").change(function() {
      readURL(this);
    });
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
    padding: 0px
  }
  
  main {
    min-height: 500px;
    display: block
  }
  
  pre {
    overflow: auto;
  }
  
  .demo {
    padding: 20px;
  }
  
  .image-wrapper {
    max-width: 600px;
    min-width: 200px;
  }
  
  img {
    max-width: 100%;
  }
  
  #image-4-wrapper .rcrop-outer-wrapper {
    opacity: .75;
  }
  
  #image-4-wrapper .rcrop-outer {
    background: #000
  }
  
  #image-4-wrapper .rcrop-croparea-inner {
    border: 1px dashed #fff;
  }
  
  #image-4-wrapper .rcrop-handler-corner {
    width: 12px;
    height: 12px;
    background: none;
    border: 0 solid #51aeff;
  }
  
  #image-4-wrapper .rcrop-handler-top-left {
    border-top-width: 4px;
    border-left-width: 4px;
    top: -2px;
    left: -2px
  }
  
  #image-4-wrapper .rcrop-handler-top-right {
    border-top-width: 4px;
    border-right-width: 4px;
    top: -2px;
    right: -2px
  }
  
  #image-4-wrapper .rcrop-handler-bottom-right {
    border-bottom-width: 4px;
    border-right-width: 4px;
    bottom: -2px;
    right: -2px
  }
  
  #image-4-wrapper .rcrop-handler-bottom-left {
    border-bottom-width: 4px;
    border-left-width: 4px;
    bottom: -2px;
    left: -2px
  }
  
  #image-4-wrapper .rcrop-handler-border {
    display: none;
  }
  
  #image-4-wrapper .clayfy-touch-device.clayfy-handler {
    background: none;
    border: 0 solid #51aeff;
    border-bottom-width: 6px;
    border-right-width: 6px;
  }
  
  label {
    display: inline-block;
    width: 60px;
    margin-top: 10px;
  }
  
  #update {
    margin: 10px 0 0 60px;
    padding: 10px 20px;
  }
  
  #cropped-original,
  #cropped-resized {
    padding: 20px;
    border: 4px solid #ddd;
    min-height: 60px;
    margin-top: 20px;
  }
  
  #cropped-original img,
  #cropped-resized img {
    margin: 5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://rawgit.com/aewebsolutions/rcrop/master/dist/rcrop.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;form id="form1" runat="server"&gt;
    &lt;input type="file" id="imgInp" /&gt;
  &lt;/form&gt;
  &lt;div class="demo"&gt;
    &lt;div class="image-wrapper"&gt;
      &lt;img id="image-3" src="https://raw.githubusercontent.com/aewebsolutions/rcrop/master/demos/images/demo.jpg"&gt;
      &lt;div id="custom-preview-wrapper"&gt;&lt;/div&gt;
      &lt;div id="cropped-resized"&gt;
        &lt;h3&gt;Images resized (50x50)&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div id="cropped-original"&gt;
        &lt;h3&gt;Images not resized (original size)&lt;/h3&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>