What do you mean by, "the image selection doesnt work"? Can you give a
clearer description o fwhere you think the problem lies?
Are you certain that the path sent back from the server is correct?
What does alert(data.path) show?
On Wed, Jan 27, 2010 at 8:21 PM, adi sembiring <sembiring....@gmail.com> wrote:
> 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
>
>
