por que la seleccion desaparece?

cadrogui · #1 (**permalink**) 28/11/2012, 18:10

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>