JCrop ne fonctionnera pas dans mon code JavaScript

Question

Ok donc le peu de code JCrop ci-dessous ne fonctionne pas.

Le visiteur utilise l'élément d'entrée de fichier pour sélectionner une image sur son ordinateur qui est ensuite affichée dans une balise img avant d'être téléchargée. Le visiteur utilise ensuite JCrop pour sélectionner la partie de l'image à télécharger. Une fois téléchargé, je vais utiliser une servlet pour recadrer et enregistrer l'image dans une base de données.

Vous avez des idées? Merci

JavaScript tête:

<script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script src="tapmodo-Jcrop-5e58bc9/js/jquery.Jcrop.js"></script> 
    <link href="tapmodo-Jcrop-5e58bc9/css/jquery.Jcrop.css" rel="stylesheet" type="text/css"/> 
    <script> 
     <!-- 
     $(document).ready(function() { 
      $("#previewInput").change(function(e) { 
       var file = e.originalEvent.srcElement.files[0]; 
       var img = document.createElement("img"); 
       var reader = new FileReader(); 
       reader.onloadend = function() { 
        img.src = reader.result; 
        img.id = 'previewimg'; 
       reader.readAsDataURL(file); 
       $("#preview").html('Please crop your image below:<br />'); 
       $("#preview").append(img); 
       setTimeout(1250); 
       $('#previewimg').Jcrop({ 
        aspectRatio: 1, 
        onChange: setCoords, 
        onSelect: setCoords 
       }); 
      }); 
     }); 

     function setCoords(c) 
     { 
      $('input[name=x1]').val(c.x); 
      $('input[name=y1]').val(c.y); 
      $('input[name=x2]').val(c.x2); 
      $('input[name=y2]').val(c.y2); 
     }; 
     --> 
    </script> 

HTML dans le corps:

  <h1>Thanks for registering!</h1> 
      Upload a display picture:<br /> 
      <div id="upload"> 
       <form action="crop" method="post" enctype="multipart/form-data" > 
        <input id="previewInput" type="file" name="image"/><br /> 
        <input type="hidden" name="x1" value=""/> 
        <input type="hidden" name="y1" value=""/> 
        <input type="hidden" name="x2" value=""/> 
        <input type="hidden" name="y2" value=""/> 
        <input type="submit" name="submit" value="Upload and crop image"/><br /> 
       </form> 
       <div id="preview"></div> 
      </div> 
      <a href="">Or click here to view your account and keep the default image</a><br /> 

Answer 1

Je suis l'auteur de Jcrop. Je pense que le problème peut être que votre élément n'est pas encore inséré dans le DOM. Il doit généralement être là pour Jcrop pour comprendre la taille. Une fois que vous le faites, dans votre code ci-dessus, vous pouvez également essayer d'utiliser $(img) au lieu de sélectionner par l'ID. Parfois, lorsque vous insérez un élément, le DOM a besoin de très peu de temps pour répondre, alors essayer de le sélectionner immédiatement après provoque parfois des problèmes. Encore une fois, je ne suis pas complètement sûr si ce sont les problèmes que vous rencontrez, mais c'est ma première réaction.