title: Jquery Crop: cropper image not changing
body: <p>I have the following code:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="style.css"&gt;
  &lt;script src="/static/js/jquery/2.1.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://fengyuanchen.github.io/cropper/js/cropper.min.js"&gt;&lt;/script&gt;
  &lt;form  action="" method="post" enctype="multipart/form-data"&gt;
  &lt;img id="crop" style="width:400px;height:200px;" /&gt;
  &lt;div id="img2" style="position: relative; overflow: hidden; border: 1px solid #000; background: #fff; width: 100px; height: 100px;"&gt;&lt;/div&gt;
  X: &lt;input type="text" id="crop_x" name="crop_x" /&gt;&lt;br /&gt;
  Y: &lt;input type="text" id="crop_y" name="crop_y" /&gt;&lt;br /&gt;
  Width: &lt;input type="text" id="crop_width" name="crop_width" /&gt;&lt;br /&gt;
  Height: &lt;input type="text" id="crop_height" name="crop_height" /&gt;&lt;br /&gt;
  &lt;input type="file" id="file" name="file" /&gt;
  &lt;input type="submit" id="submit" name="submit" value="Submit" /&gt;
  &lt;/form&gt;
  &lt;script&gt;
  
  var url = null;
  $('#file').on('change',function(){
  
      var file = this.files[0];
  
      if(url != null){
  
          URL.revokeObjectURL(url);
  
      }
  
      url = URL.createObjectURL(file);
  
  
      startCropper();
  
  });
  
  
  function startCropper(){
  
      $('#crop').removeAttr('src');
  
      $('#crop').attr('src',url);
  
      $('#crop').cropper({
  
      viewMode            : 0,
  
      cropBoxResizable    : false,
  
      minCropBoxWidth     : 100,
  
      minCropBoxHeight    : 100,
  
      dragMode            : 'none',
  
      preview             : $('#img2'),
  
      aspectRatio: 1,
  
      crop : function(e){
  
          $('#crop_x').val(e.x);
  
          $('#crop_y').val(e.y);
  
      }
  
   });
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>The problem is that when I select a <strong>new</strong> file, the new image is not showed (the old image is still displayed in the cropper).</p>
  
  <p>As you can see, I check the old url and revoke this. When I don't use $("#crop").cropper({...}) in the startCropper() function, it works.</p>
  
  <p>GitHub: <a href="https://github.com/fengyuanchen/cropper/tree/v2.3.0" rel="nofollow noreferrer">https://github.com/fengyuanchen/cropper/tree/v2.3.0</a></p>
  
  <p>How can I force the cropper to load the new image?</p>