hola gente, tengo este code, y funciona bien el upload de la imagen con ajax, pero cuando la muestra e intento seleccionar al soltar el mouse la seleccion desaparece.
les dejo el code, espero me den una mano.
gracias.
Código HTML:
<?
$thumb_width = "200";
$thumb_height = "200";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.imgareaselect.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
</head>
<body>
<script type="text/javascript" >
var ImgWidth;
var ImgHeight;
$(document).ready(function() {
$('#save_thumb').click(function() {
var x1 = $('#x1').val();
var y1 = $('#y1').val();
var x2 = $('#x2').val();
var y2 = $('#y2').val();
var w = $('#w').val();
var h = $('#h').val();
if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || h==""){
alert("Debes crear una seleccion");
return false;
}else{
return true;
}
});
$('#photoimg').live('change', function() {
$("#preview").html('');
$("#thumbnail_cont").html('<img src="loader.gif" alt="Uploading...."/>');
$("#imageform").ajaxForm({
dataType: 'json',
success: function(data){
$("#thumbnail_cont").html('<img id="thumbnail" src=' + data.url + ' "/>');
ImgWidth = data.width
ImgHeoght = data.height;
$('#thumbnail').imgAreaSelect({ aspectRatio: '1:<?php echo $thumb_height/$thumb_width;?>', onSelectChange: preview});
console.log(data);
}
}).submit();
});
});
function preview(img, selection) {
var scaleX = <?php echo $thumb_width; ?> / selection.width;
var scaleY = <?php echo $thumb_height ;?> / selection.height;
$('#thumbnail + div > img').css({
width: Math.round(scaleX * ImgWidth) + 'px',
height: Math.round(scaleY * ImgHeight) + 'px',
marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
});
$('#x1').val(selection.x1);
$('#y1').val(selection.y1);
$('#x2').val(selection.x2);
$('#y2').val(selection.y2);
$('#w').val(selection.width);
$('#h').val(selection.height);
}
</script>
<form id="imageform" method="post" enctype="multipart/form-data" action='upload_ajax.php'>
<input type="file" name="photoimg" id="photoimg" />
</form>
<div id='thumbnail_cont'>
<img id="thumbnail" src="" />
</div>
<br style="clear:both;"/>
<form name="thumbnail" action="upload_ajax.php" method="post">
<input type="hidden" name="x1" value="" id="x1" />
<input type="hidden" name="y1" value="" id="y1" />
<input type="hidden" name="x2" value="" id="x2" />
<input type="hidden" name="y2" value="" id="y2" />
<input type="hidden" name="w" value="" id="w" />
<input type="hidden" name="h" value="" id="h" />
<input type="submit" id="save_thumb" name="upload_thumbnail" value="Guardar Imagen" class="css3button">
</form>
</body>
</html>