cropbox and upload

cropbox and upload

I can't see what is wrong with this. When I upload an image it is using the height and width of the previous image not the one just uploaded by the look of it. Thanks


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>jQuery-cropbox</title>
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  6.   <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
  7.   <link type="text/css" media="screen" rel="stylesheet" href="jquery.cropbox.css">
  8.   <style type="text/css">
  9.     body {
  10.       font-family : sans-serif;
  11.       font-size   : 13px;
  12.     }
  13.     .results {
  14.       font-family : monospace;
  15.       font-size   : 20px;
  16.     }
  17.   </style>
  18.   <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  19.   <script type="text/javascript" src="hammer.js"></script>
  20.   <script type="text/javascript" src="jquery.mousewheel.js"></script>
  21.   <script type="text/javascript" src="jquery.cropbox.js"></script>
  22.   <script type="text/javascript" defer>
  23.   
  24.        
  25.     $( function () {   
  26.        
  27.       $( '#cropimage' ).each( function () {
  28.         var image = $(this),
  29.             cropwidth = image.attr('cropwidth'),
  30.             cropheight = image.attr('cropheight'),
  31.             results = image.next('.results' ),
  32.             x       = $('.cropX', results),
  33.             y       = $('.cropY', results),
  34.             w       = $('.cropW', results),
  35.             h       = $('.cropH', results);
  36.           image.cropbox( {width: cropwidth, height: cropheight, showControls: 'auto' } )
  37.             .on('cropbox', function( event, results, img ) {
  38.               x.text( results.cropX );
  39.               y.text( results.cropY );
  40.               w.text( results.cropW );
  41.               h.text( results.cropH );
  42.              
  43.             });
  44.       } );
  45.       $('#file').on('change', function(){
  46.             var reader = new FileReader();
  47.             reader.onload = function(e) {
  48.                 $( '#cropimage' ).attr('src', e.target.result);
  49.             }
  50.             reader.readAsDataURL(this.files[0]);
  51.             this.files = [];
  52.             $( '#cropimage' ).each( function () {           
  53.                 var image = $(this),
  54.                     cropwidth = image.attr('cropwidth'),
  55.                     cropheight = image.attr('cropheight'),
  56.                
  57.                     results = image.next('.results' ),
  58.                     x       = $('.cropX', results),
  59.                     y       = $('.cropY', results),
  60.                     w       = $('.cropW', results),
  61.                     h       = $('.cropH', results);                       
  62.                   image.cropbox( {width: cropwidth, height: cropheight, showControls: 'auto' } )
  63.                     .on('cropbox', function( event, results, img ) {
  64.                       x.text( results.cropX );
  65.                       y.text( results.cropY );
  66.                       w.text( results.cropW );
  67.                       h.text( results.cropH );
  68.                      
  69.                     });
  70.               } );
  71.         });  
  72.     } );
  73.   </script>
  74. </head>
  75. <body>
  76.     <input type="file" id="file">
  77.    
  78.   <img id="cropimage" name="cropimage" alt="" src="img.jpg" cropwidth="461" cropheight="400"/>
  79.  
  80.   <div class="results">
  81.     <b>X</b>: <span class="cropX"></span>
  82.     <b>Y</b>: <span class="cropY"></span>
  83.     <b>W</b>: <span class="cropW"></span>
  84.     <b>H</b>: <span class="cropH"></span>
  85.   </div>
  86. </body>