Code:
<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>
Comment