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

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(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

[RamananKalirajan]

Whether its showing any script error on that line?

Thanks and Regards
Ramanan Kalirajan

[koyanpaing]

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 .

<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>