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: [email protected]
GTalk: [email protected]
e-mail: [email protected]
Facebook: [email protected]
HP: +62 852 6892 4259
