Я пытаюсь создать изображение с помощью JQuery. Я использую ajax для загрузки изображения. после успешной загрузки изображения. Я загружаю загруженное изображение с помощью jquery в свой контейнер.
$("#image_upload").html("<img src='" + data.path + "' width=\"460\" id=\"cropbox\" alt=\"cropbox\" />"); но выбор изображения не работает. почему это может произойти? это мой код:
<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(cx); $("#y").val(cy); $("#w").val(cw); $("#h").val(ch); } 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 -->.<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(cx); $("#y").val(cy); $("#w").val(cw); $("#h").val(ch); } 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 -->
Помоги мне, пожалуйста ….