<script> function onFileLoad(e) { $('#cropbox').html('<img src="'+e.target.result +'"/>'); } function displayPreview(files) { var reader = new FileReader(); reader.onload = onFileLoad; reader.readAsDataURL(files[0]); } </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script src="js/jquery.min.js"></script> <script src="js/jquery.Jcrop.js"></script> <link rel="stylesheet" href="css/demos.css" type="text/css" /> <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" /> <script type="text/javascript"> $(function(){ $('#cropbox').Jcrop({ aspectRatio: 1, onSelect: updateCoords }); }); function updateCoords(c) { $('#x').val(c.x); $('#y').val(c.y); $('#w').val(c.w); $('#h').val(c.h); }; function checkCoords() { if (parseInt($('#w').val())) return true; alert('Please select a crop region then press submit.'); return false; }; </script> <body style="text-align:center; margin-top:50px; width:50%;"> <form action="" method="post" enctype="multipart/form-data" > <fieldset style="text-align:center; height:200px; color:#0000FF; height:200%; width:188%"> <legend style="border: #0000CC 1px solid;"> Upload Image</legend> <table width="200" border="0" align="center" cellpadding="6px"> <tr> <td height="20px;">Image</td> <br/> <td><input type="file" name="image" id="image" onChange="displayPreview(this.files);"/> </td> </tr> <td id="abc"></td> </table> <br/> <input type="submit" value="submit" name="submit"> <br/> <div id="cropbox" class='imagem_artigo' ></div> <form action="form.php" method="post" onSubmit="return checkCoords();" enctype="multipart/form-data" > <input type="text" id="x" name="x" /> <input type="text" id="y" name="y" /> <input type="text" id="w" name="w" /> <input type="text" id="h" name="h" /> <input type="submit" value="Crop Image" class="btn btn-large btn-inverse" name="submit" /> </form> <br> <br> </fieldset> </form> </body>
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)