Hi ...., I'm trying to develop image crop using JQuery. I use ajax to upload the image. after the image success fully uploaded. I load the uploaded image using jquery to its container.
> $("#image_upload").html("<img src='" + data.path + "' width=\"460\" > id=\"cropbox\" alt=\"cropbox\" />"); > but the image selection doesnt work. why it could be happened ? this is my code: <style type="text/css"> > #preview { > width: 150px; > height: 150px; > overflow: hidden; > } > </style> > <script type="text/javascript" src="<?php echo > base_url()?>asset/jqupload/js/ajaxfileupload.js"> > </script> > <script type="text/javascript" src="<?php echo > base_url()?>asset/jcrop/jquery.Jcrop.pack.js"> > </script> > <link rel="stylesheet" href="<?php echo > base_url()?>asset/jcrop/jquery.Jcrop.css" type="text/css" /> > <script type="text/javascript"> > function ajaxFileUpload(){ > $("#loading").ajaxStart(function(){ > > $(this).show(); > }).ajaxComplete(function(){ > $(this).hide(); > }); > > $.ajaxFileUpload({ > url: '<?php echo site_url()?>/upload/do_upload', > secureuri: false, > fileElementId: 'fileToUpload', > dataType: 'json', > success: function(data, status){ > if (typeof(data.error) != 'undefined') { > if (data.error != '') { > $("#image_upload").html(data.error); > $("#image_upload").fadeIn("slow"); > } > else { > $("#image_upload").html("<img src='" + data.path + > "' width=\"460\" id=\"cropbox\" alt=\"cropbox\" />"); > $("#image_upload").fadeIn("slow"); > $("#orig_h").val(data.width); > $("#orig_w").val(data.height); > //alert("<a href='" + data.path + "' />"); > } > } > }, > error: function(data, status, e){ > $("#image_upload").html(e); > $("#image_upload").fadeIn("slow"); > } > }) > > return false; > } > > $(document).ready(function(){ > $(function(){ > $('#cropbox').Jcrop({ > aspectRatio: 1, > setSelect: [0, 0, $("#oring_w").val(), > $("#oring_h").val()], > onSelect: updateCoords, > onChange: updateCoords > }); > }); > > function updateCoords(c){ > showPreview(c); > $("#x").val(c.x); > $("#y").val(c.y); > $("#w").val(c.w); > $("#h").val(c.h); > } > > function showPreview(coords){ > var rx = $("#oring_w").val() / coords.w; > var ry = $("#oring_h").val() / coords.h; > > $("#preview img").css({ > width: Math.round(rx * $("#oring_w").val()) + 'px', > height: Math.round(ry * $("#oring_h").val()) + 'px', > marginLeft: '-' + Math.round(rx * coords.x) + 'px', > marginTop: '-' + Math.round(ry * coords.y) + 'px' > }); > } > }); > </script> > <!-- begin main content --> > <div id="templatemo_content_area"> > <h1 class="content_title">Label Info<hr/></h1> > <div id="templatemo_bi_full"> > <h2>Label Setting</h2> > <div id="container"> > </div> > <!--container--> > <br/> > <h2>Avatar</h2> > <div class="info"> > </div> > <div id="avatar_container"> > <form name="form" action="" method="POST" > enctype="multipart/form-data"> > <ul> > <li class="leftHalf "> > <label class="desc" for="lbl_type"> > Change Your Avatar > </label> > <div> > <div id="avatar"> > <img src="<?php echo $avatar?>" width="130" > height="130" /> > </div> > <div id="avatar_upload"> > <input id="fileToUpload" > name="fileToUpload" class="field field" value="" size="30" tabindex="5" > type="file" /><input id="buttonUpload" name="buttonUpload" class="btTxt > submit" type="submit" value="Upload" onclick="return > ajaxFileUpload();"/><img id="loading" src="<?php echo > base_url()?>asset/jqupload/images/loading.gif" style="display:none;"> > </div> > </div> > </li> > </ul> > <ul id="crop_container"> > <li class="leftHalf "> > <label class="desc" for="lbl_name"> > Avatar for crop > </label> > <div id="image_upload"> > <img src="<?php echo $avatar?>" width="450" > height="130" id="cropbox" name="cropbox" /> > </div> > </li> > <li class="rightHalf "> > <label class="desc" for="lbl_type"> > Crop Display > </label> > <div id="preview"> > <img src="<?php echo base_url() . 'files/' ?>" > alt="thumb" /> > </div> > </li> > <div class="info"> > </div> > <li class="buttons "> > <input name="saveForm" class="btTxt submit" > type="submit" value="Crop and Save" /> > </li> > </ul> > <input type="text" id="x" name="x" /> > <input type="text" id="y" name="y" /> > <input type="text" id="w" name="w" /> > <input type="text" id="h" name="h" /> > <input type="text" id="oring_w" name="oring_w" /> > <input type="text" id="oring_h" name="oring_h" /> > </form> > </div> > <div class="cleaner"> > </div> > </div> > <div class="cleaner"> > </div> > </div> > <!-- end main content --> > Help me please .... -- Adi Gunanta Sembiring Blog: http://adisembiring.wordpress.com YM: adisembir...@yahoo.com GTalk: adi.sembir...@gmail.com e-mail: sembiring....@gmail.com Facebook: sembiring....@gmail.com HP: +62 852 6892 4259