469,357 Members | 1,593 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,357 developers. It's quick & easy.

How to Image Upload Crop

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(function () {

here is my javascript code.

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.  
  3.               $(function() {
  4.                 $("#uploadify").uploadify({
  5.                     'uploader'       : 'uploadify/uploadify.swf',
  6.                     'script'         : '/html/crop/Uploader_files/index.jsp',
  7.                     'cancelImg'      : 'uploadify/cancel.png',
  8.                     'folder'         : 'photos',
  9.                     'queueID'        : 'fileQueue',
  10.                     'auto'           : true,
  11.                     'buttonText'     : 'upload',
  12.                     'queueSizeLimit' : 1,
  13.                     'multi'          : true,
  14.                     'fileDesc'         : 'Support format: jpg / gif / jpeg / png / bmp.',
  15.                     'fileExt'         : '*. jpg; *. gif ; *. jpeg; *. png ',
  16.                     'sizeLimit'      : '99819200',//max size bytes - 800kb
  17.                     'onComplete'       : function (event, queueID, fileObj, response, data) {
  18.  
  19.                     alert("response:"+response.replace(/^\s+|\s+$/g,""));
  20.  
  21.                     alert("fileObj.name:"+fileObj.name);
  22.  
  23.                                             //$('#uploadifyUploader').remove();
  24.  
  25.     //var dataresponse = eval('(' + response + ')');
  26.  
  27.                                             //alert("dataresponse:"+dataresponse);
  28.                                             //alert("dataresponse.result:"+dataresponse.result);
  29.                                             //dataresponse.result
  30.             if( 1==1){ 
  31.                 var filenametmp ="";
  32.                 //(fileObj.name).substring(0,(fileObj.name).lastIndexOf("?");        
  33.             //$('#tempfile').val(filenametmp);
  34.  
  35.     var img = new Image();
  36.     alert('img:'+img);
  37.     alert('$img:'+$(img));
  38.  
  39. $(img).load(function () {
  40.  
  41.         alert('img:'+img);
  42.         $("#cropbox").remove();
  43.         alert('img:'+img);
  44.         $(".jcrop-holder").remove();
  45.                         $(this).attr('id','cropbox');
  46.                                                     $(this).hide();
  47.                                                     $('#image_container').append(this);
  48.  
  49.              $(this).fadeIn().Jcrop({
  50.                 onChange: showPreview,
  51.                                                             onSelect: showPreview,
  52.                                                             aspectRatio: 1,
  53.                                                             onSelect: updateCoords,
  54.                                                             setSelect: [ 0, 0, 150, 150 ]
  55.                                                         });
  56.  
  57.                         $("#preview").remove();
  58.              var _imgprev = $(document.createElement('img')).attr('id','preview').attr('src','/html/uploads/'+fileObj.name);
  59.                         $('#preview_container').append(_imgprev);
  60.  
  61.             alert('_crop_bttn:'+$('#_crop_bttn').length);
  62.  
  63.             if(!$('#_crop_bttn').length){        
  64.                                                         var _crop_bttn = $(document.createElement('input')).attr('id','_crop_bttn').attr('type','submit').val('save');
  65.                                                         var _crop_cancel_bttn = $(document.createElement('input')).attr('id','_crop_cancel_bttn').attr('type','submit').val('cancel');
  66.                                                         _crop_cancel_bttn.click(function(){$('#cropattrform input.jq_step').val('cancel');});    
  67.                                                         _crop_bttn.click(function(){$('#cropattrform input.jq_step').val('process');});    
  68.                                                         $('#cropattrform').append(_crop_bttn).append(_crop_cancel_bttn);
  69.                                                     }
  70.                                                 }).attr('src', '/html/uploads/'+fileObj.name);
  71.                                             }    
  72.                                             else
  73.                                                 alert('error');
  74.                                         },        
  75. 'onError'         : function(event, queueID, fileObj, response, data){alert('error'+response);alert('error'+fileObj.name); }
  76.             });
  77.       });    
  78.  
From the about code starting from
$(img).load(function () {

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

$('#cropattrform').append(_crop_bttn).append(_crop _cancel_bttn);
}
}).attr('src', '/html/uploads/'+fileObj.name);
Does not work

Thanks and Regards,
Yan Paing
May 24 '10 #1
2 4237
RamananKalirajan
607 512MB
Whether its showing any script error on that line?

Thanks and Regards
Ramanan Kalirajan
May 26 '10 #2
Thanks for Reply Ramanankalirajan,
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 .



Expand|Select|Wrap|Line Numbers
  1. <link href="Uploader_files/default.css" rel="stylesheet" type="text/css">
  2. <link href="Uploader_files/uploadify.css" rel="stylesheet"
  3.     type="text/css">
  4. <link rel="stylesheet" href="Uploader_files/jquery.css" type="text/css">
  5. <link rel="stylesheet" href="Uploader_files/demos.css" type="text/css">
  6. <link rel="stylesheet" href="jcrop/jquery.Jcrop.css" type="text/css" />
  7.  
  8.  
  9. <script type="text/javascript" language="javascript" src="Uploader_files/jquery-1.js"></script>
  10. <script type="text/javascript" src="Uploader_files/swfobject.js"></script>
  11. <script type="text/javascript" src="Uploader_files/jquery.js"></script>
  12. <script type="text/javascript" src="uploadify/jquery.uploadify.v2.1.0.min.js"></script>
  13. <script type="text/javascript" src="jcrop/jquery.Jcrop.min.js"></script>
  14. <script type="text/javascript" src="Uploader_files/jquery_002.js"></script>
  15.  
  16.  
  17. <script type="text/javascript">
  18. var imgName;
  19.               $(function() {
  20.                 $("#uploadify").uploadify({
  21.                     'uploader'       : 'uploadify/uploadify.swf',
  22.                     'script'         : '/html/crop/Uploader_files/index.jsp',
  23.                     'cancelImg'      : 'uploadify/cancel.png',
  24.                     'folder'         : 'photos',
  25.                     'queueID'        : 'fileQueue',
  26.                     'auto'           : true,
  27.                     'buttonText'     : 'upload',
  28.                     'queueSizeLimit' : 1,
  29.                     'multi'          : true,
  30.                     'fileDesc'         : 'Support format: jpg / gif / jpeg / png / bmp.',
  31.                     'fileExt'         : '*. jpg; *. gif ; *. jpeg; *. png ',
  32.                     'sizeLimit'      : '99819200',//max size bytes - 800kb
  33.                     'onComplete'       : function (event, queueID, fileObj, response, data) {
  34.  
  35.  
  36.             if( 1==1){ 
  37.                 var filenametmp ="";
  38.  
  39.     var img = new Image();
  40.  
  41. load(img,fileObj,this);
  42.  
  43.                                             }    
  44.                                             else
  45.                                                 alert('error');
  46.                                         },        
  47. 'onError'         : function(event, queueID, fileObj, response, data){alert('error'+response);alert('error'+fileObj.name); }
  48.             });
  49.       });    
  50.             function updateCoords(c)
  51.             {
  52.  
  53.                 $('#x').val(c.x);
  54.                 $('#y').val(c.y);
  55.                 $('#w').val(c.w);
  56.                 $('#h').val(c.h);
  57.  
  58.             };
  59.             function checkCoords()
  60.             {
  61.  
  62.                 if (parseInt($('#w').val())){
  63.                     return true;
  64.                 }    
  65.                 $('#x').val(0);
  66.                 $('#y').val(0);
  67.                 $('#w').val(150);
  68.                 $('#h').val(150);
  69.  
  70.                 return true;
  71.             };
  72.             function showPreview(coords)
  73.             {
  74.                 if (parseInt(coords.w) > 0)
  75.                 {
  76.                     var rx = 100 / coords.w;
  77.                     var ry = 100 / coords.h;
  78.  
  79.                     $('#preview').css({
  80.                         width: Math.round(rx * $imgpos.width) + 'px',
  81.                         height: Math.round(ry * $imgpos.height) + 'px',
  82.                         marginLeft: '-' + Math.round(rx * coords.x) + 'px',
  83.                         marginTop: '-' + Math.round(ry * coords.y) + 'px'
  84.                     });
  85.                 }
  86.             };    
  87.             $imgpos = {
  88.                     width    : '100%',
  89.                     height    : '100%'
  90.             };
  91.  
  92. function load(img,fileObj,_this) {
  93.  
  94.         var _imgContainer = $(document.createElement('img')).attr('src','/html/uploads/'+fileObj.name).attr('id','cropbox');
  95.         imgName=fileObj.name;
  96.         $(".jcrop-holder").remove();
  97.         $('#imgName').val(imgName);
  98.           $('#image_container').append(_imgContainer);
  99.  
  100.      $('#cropbox').fadeIn().Jcrop({
  101.  
  102.             onChange: showPreview,
  103.                                                         onSelect: showPreview,
  104.                                                         aspectRatio: 1,
  105.                                                         onSelect: updateCoords,
  106.                                                         setSelect: [ 0, 0, 100, 100 ]
  107.                                                     });
  108.  
  109.                     $("#preview").remove();
  110.  
  111.  var _imgprev = $(document.createElement('img')).attr('id','preview').attr('src','/html/uploads/'+fileObj.name).attr('name','tempImg');
  112.                     $('#preview_container').append(_imgprev);
  113.  
  114. if(!$('#_crop_bttn').length){        
  115.                                                         var _crop_bttn = $(document.createElement('input')).attr('id','_crop_bttn').attr('type','submit').val('save');
  116.                                                         var _crop_cancel_bttn = $(document.createElement('input')).attr('id','_crop_cancel_bttn').attr('type','submit').val('cancel');
  117.                                                         _crop_cancel_bttn.click(
  118.                                                                 function(){
  119.                                                                     alert('_crop_cancel_bttn click : ');
  120.                                                                     $('#cropattrform input.jq_step').val('cancel');
  121.                                                                 });    
  122.                                                         _crop_bttn.click(function(){
  123.  
  124.                                                             $('#cropattrform input.jq_step').val('process');
  125.                                                             });    
  126.                                                         $('#cropattrform').append(_crop_bttn).append(_crop_cancel_bttn);
  127.                                                     }
  128.  
  129. }
  130.           </script>
May 26 '10 #3

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

reply views Thread by Aurel | last post: by
5 posts views Thread by Kevin Smith | last post: by
6 posts views Thread by isaacyho | last post: by
3 posts views Thread by ACaunter | last post: by
6 posts views Thread by John Salerno | last post: by
reply views Thread by brahimbb17 | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.