<script> function onFileLoad(e) { $('#show_selected_image').html('<img id="recipeimge1" src="'+e.target.result +'"/>'); } function displayPreview(files) { var reader = new FileReader(); reader.onload = onFileLoad; reader.readAsDataURL(files[0]); $('#recipeimge1').Jcrop({ aspectRatio: 1, setSelect: [ 50, 290, 350, 10 ], addClass: 'jcrop_custom', bgColor: 'black', bgOpacity: .5, sideHandles: false, onChange: updateCoordsf }); } function updateCoordsf(c) { $('#x').val(c.x); $('#y').val(c.y); $('#w').val(c.w); $('#h').val(c.h); }; </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script src="jquery.Jcrop.js"></script>
<link rel="stylesheet" href="jquery.Jcrop.css" type="text/css" /> <body style="text-align:center; margin-top:50px; width:50%;"> <form action="" method="post" enctype="multipart/form-data" onSubmit="myname()"> <fieldset style="text-align:center; height:200px; color:#0000FF;"> <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> </table> <br/> <input type="submit" value="submit" name="submit"> <br/> <div id="show_selected_image"></div> <div class="next_btn_st"> <form> <input type="text" name="x" id="x" /> <input type="text" name="y" id="y" /> <input type="text" name="w" id="w" /> <input type="text" name="h" id="h" /> <input type="submit" name="submit" id="image" /> </form> </fieldset> </form> </body>
Quote:yes it coming like TypeError: $(...).Jcrop is not a function$('#recipeimge1').Jcrop({ in console
src="jquery.Jcrop.js"
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)