1
Expand|Select|Wrap|Line Numbers
- <script>
- function onFileLoad(e) {
- var sradha = $('#cropbox').html('<img src="'+e.target.result +'"/>');
- alert(sradha);
- }
- 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 class="imagem_artigo" id="cropbox"></div>
- <!--<img class='imagem_artigo' src="Lighthouse.jpg" id="cropbox" /> -->
- <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" />
- <!-- <div id="sradha"> <img class='imagem_artigo' src="Lighthouse1.jpg" /> </div>-->
- </form>
- <br>
- <br>
- </fieldset>
- </form>
- </body>
