How to Image Upload Crop

[koyanpaing]

I can't load image with javascript. It runs until

alert('$img:'+$ (img));

and show alert but doesn't run the function about

$(img).load(fun ction () {

here is my javascript code.

<script type="text/javascript">

	  		$(function() {
				$("#uploadify").uploadify({
					'uploader'       : 'uploadify/uploadify.swf',
					'script'         : '/html/crop/Uploader_files/index.jsp',
					'cancelImg'      : 'uploadify/cancel.png',
					'folder'         : 'photos',
					'queueID'        : 'fileQueue',
					'auto'           : true,
					'buttonText'     : 'upload',
					'queueSizeLimit' : 1,
					'multi'          : true,
					'fileDesc'		 : 'Support format: jpg / gif / jpeg / png / bmp.',
					'fileExt'		 : '*. jpg; *. gif ; *. jpeg; *. png ',
					'sizeLimit'      : '99819200',//max size bytes - 800kb
					'onComplete'  	 : function (event, queueID, fileObj, response, data) {
					
					alert("response:"+response.replace(/^\s+|\s+$/g,""));
					
					alert("fileObj.name:"+fileObj.name);
					
											//$('#uploadifyUploader').remove();
											
	//var dataresponse = eval('(' + response + ')');
											
											//alert("dataresponse:"+dataresponse);
											//alert("dataresponse.result:"+dataresponse.result);
											//dataresponse.result
			if( 1==1){ 
				var filenametmp ="";
				//(fileObj.name).substring(0,(fileObj.name).lastIndexOf("?");		
			//$('#tempfile').val(filenametmp);
												
	var img = new Image();
	alert('img:'+img);
	alert('$img:'+$(img));

$(img).load(function () {

		alert('img:'+img);
		$("#cropbox").remove();
		alert('img:'+img);
		$(".jcrop-holder").remove();
						$(this).attr('id','cropbox');
										            $(this).hide();
										            $('#image_container').append(this);
											            
		 	$(this).fadeIn().Jcrop({
				onChange: showPreview,
															onSelect: showPreview,
															aspectRatio: 1,
															onSelect: updateCoords,
															setSelect: [ 0, 0, 150, 150 ]
														});
			
						$("#preview").remove();
	 		var _imgprev = $(document.createElement('img')).attr('id','preview').attr('src','/html/uploads/'+fileObj.name);
						$('#preview_container').append(_imgprev);
	
			alert('_crop_bttn:'+$('#_crop_bttn').length);
													
			if(!$('#_crop_bttn').length){		
										            	var _crop_bttn = $(document.createElement('input')).attr('id','_crop_bttn').attr('type','submit').val('save');
										            	var _crop_cancel_bttn = $(document.createElement('input')).attr('id','_crop_cancel_bttn').attr('type','submit').val('cancel');
										            	_crop_cancel_bttn.click(function(){$('#cropattrform input.jq_step').val('cancel');});	
														_crop_bttn.click(function(){$('#cropattrform input.jq_step').val('process');});	
										            	$('#cropattrform').append(_crop_bttn).append(_crop_cancel_bttn);
													}
									        	}).attr('src', '/html/uploads/'+fileObj.name);
											}	
											else
												alert('error');
										},		
'onError'		 : function(event, queueID, fileObj, response, data){alert('error'+response);alert('error'+fileObj.name); }
			});
	  });

From the about code starting from
$(img).load(fun ction () {

alert('img:'+im g);
......... to

$('#cropattrfor m').append(_cro p_bttn).append( _crop_cancel_bt tn);
}
}).attr('src', '/html/uploads/'+fileObj.name) ;
Does not work

Thanks and Regards,
Yan Paing

[RamananKalirajan]

Whether its showing any script error on that line?

Thanks and Regards
Ramanan Kalirajan

[koyanpaing]

Thanks for Reply Ramanankaliraja n,
I didn't see any script error on that line when i run it.
I fixed the code and that error is fixed.But preview image alignment is now in problem.

Here is my code .

<link href="Uploader_files/default.css" rel="stylesheet" type="text/css">
<link href="Uploader_files/uploadify.css" rel="stylesheet"
	type="text/css">
<link rel="stylesheet" href="Uploader_files/jquery.css" type="text/css">
<link rel="stylesheet" href="Uploader_files/demos.css" type="text/css">
<link rel="stylesheet" href="jcrop/jquery.Jcrop.css" type="text/css" />


<script type="text/javascript" language="javascript" src="Uploader_files/jquery-1.js"></script>
<script type="text/javascript" src="Uploader_files/swfobject.js"></script>
<script type="text/javascript" src="Uploader_files/jquery.js"></script>
<script type="text/javascript" src="uploadify/jquery.uploadify.v2.1.0.min.js"></script>
<script type="text/javascript" src="jcrop/jquery.Jcrop.min.js"></script>
<script type="text/javascript" src="Uploader_files/jquery_002.js"></script>


<script type="text/javascript">
var imgName;
	  		$(function() {
				$("#uploadify").uploadify({
					'uploader'       : 'uploadify/uploadify.swf',
					'script'         : '/html/crop/Uploader_files/index.jsp',
					'cancelImg'      : 'uploadify/cancel.png',
					'folder'         : 'photos',
					'queueID'        : 'fileQueue',
					'auto'           : true,
					'buttonText'     : 'upload',
					'queueSizeLimit' : 1,
					'multi'          : true,
					'fileDesc'		 : 'Support format: jpg / gif / jpeg / png / bmp.',
					'fileExt'		 : '*. jpg; *. gif ; *. jpeg; *. png ',
					'sizeLimit'      : '99819200',//max size bytes - 800kb
					'onComplete'  	 : function (event, queueID, fileObj, response, data) {

					
			if( 1==1){ 
				var filenametmp ="";
							
	var img = new Image();

load(img,fileObj,this);

											}	
											else
												alert('error');
										},		
'onError'		 : function(event, queueID, fileObj, response, data){alert('error'+response);alert('error'+fileObj.name); }
			});
	  });    
			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;
				}	
				$('#x').val(0);
				$('#y').val(0);
				$('#w').val(150);
				$('#h').val(150);
				
				return true;
			};
			function showPreview(coords)
			{
				if (parseInt(coords.w) > 0)
				{
					var rx = 100 / coords.w;
					var ry = 100 / coords.h;
					
					$('#preview').css({
						width: Math.round(rx * $imgpos.width) + 'px',
						height: Math.round(ry * $imgpos.height) + 'px',
						marginLeft: '-' + Math.round(rx * coords.x) + 'px',
						marginTop: '-' + Math.round(ry * coords.y) + 'px'
					});
				}
			};	
			$imgpos = {
				    width	: '100%',
				    height	: '100%'
			};

function load(img,fileObj,_this) {
		
		var _imgContainer = $(document.createElement('img')).attr('src','/html/uploads/'+fileObj.name).attr('id','cropbox');
		imgName=fileObj.name;
		$(".jcrop-holder").remove();
		$('#imgName').val(imgName);
  	    $('#image_container').append(_imgContainer);
						               
	 $('#cropbox').fadeIn().Jcrop({
		 
			onChange: showPreview,
														onSelect: showPreview,
														aspectRatio: 1,
														onSelect: updateCoords,
														setSelect: [ 0, 0, 100, 100 ]
													});
	 
					$("#preview").remove();
					
 var _imgprev = $(document.createElement('img')).attr('id','preview').attr('src','/html/uploads/'+fileObj.name).attr('name','tempImg');
					$('#preview_container').append(_imgprev);
	
if(!$('#_crop_bttn').length){		
										            	var _crop_bttn = $(document.createElement('input')).attr('id','_crop_bttn').attr('type','submit').val('save');
										            	var _crop_cancel_bttn = $(document.createElement('input')).attr('id','_crop_cancel_bttn').attr('type','submit').val('cancel');
										            	_crop_cancel_bttn.click(
												            	function(){
												            		alert('_crop_cancel_bttn click : ');
													            	$('#cropattrform input.jq_step').val('cancel');
												            	});	
														_crop_bttn.click(function(){

															$('#cropattrform input.jq_step').val('process');
															});	
										            	$('#cropattrform').append(_crop_bttn).append(_crop_cancel_bttn);
													}

}
  		</script>