Replace an Image when another Image is uploaded

Question

I have div that is used to pupup an image to crop

<div id='container'>
    <input type="button" class='click' value="Crop" onclick="setpic()"/>
</div>

to call "popup" div from the div "container" I use

<script type='text/javascript'>
    $(function(){
        var overlay = $('<div id="overlay"></div>');
        $('.close').click(function(){
        $('.popup').hide();
        overlay.appendTo(document.body).remove();
        return false;
    });

    $('.x').click(function(){
        $('.popup').hide();
        overlay.appendTo(document.body).remove();
        return false;
    });

    $('.click').click(function(){
        overlay.show();
        overlay.appendTo(document.body);
        $('.popup').show();
        return false;
    });
});
</script>

My popup div is

<div class='popup'>
    <div class='content' id="imgnew" >
        <img class="img-responsive"   id="cropbox" src="<s:url value="%{#session.abc}"/> " />
        <p>
            <s:form action="Cropp" method="post" theme="simple" >
            <s:hidden name="file" value="%{ImageForCrop}" />
            <input type="hidden" name="x1" id="x1"/>
            <input type="hidden" name="y1" id="y1"/>
            <input type="hidden" name="x2" id="x2"/>
            <input type="hidden" name="y2" id="y2"/>
            <input type="hidden" name="w" id="w"/>
            <input type="hidden" name="h" id="h"/>
            <input type="submit" value="Crops" name="action" />
        </s:form>
    </div>
</div>       

when I upload an image that image should replace the existing image.. I call onclick from first div I mentioned. and I try to Change the image when the user browse new picture but I can not update/replace the picture I used the below javascript to change it dynamically

<script type="text/javascript">
    function setpic()
    {
        var im=document.getElementById("cropbox");
        alert(im.src);
        im.src="uploadedFiles/reek.jpg";
    }

       jQuery(function($) {

        $('#cropbox').Jcrop({
        onSelect: setCoords,
        onChange: setCoords
    });
    });

            function setCoords(c)
            {
              jQuery('#x1').val(c.x);
              jQuery('#y1').val(c.y);
              jQuery('#x2').val(c.x2);
              jQuery('#y2').val(c.y2);
              jQuery('#w').val(c.w);
              jQuery('#h').val(c.h);
             };
</script>

but it is not working please tell me where did I go wrong..

It will work when I do not use crop function with it.

Answer 1

I just call javascript function to do crop on image on the button click to popup the image

just as

   <input type="button" onclick="setpic()" data-popover="true" data-toggle="modal" data-target="#crop" value="Crop" />

My javascript function is

   <script type="text/javascript">
     function setpic()
            {
                 $('#cropbox').Jcrop({
                 onSelect: setCoords,
                 onChange: setCoords

            });
            }
     function setCoords(c)
            {
              jQuery('#x1').val(c.x);
              jQuery('#y1').val(c.y);
              jQuery('#x2').val(c.x2);
              jQuery('#y2').val(c.y2);
              jQuery('#w').val(c.w);
              jQuery('#h').val(c.h);
             };

   </script> 

I used this code to update the image

   var imgs =document.getElementById("cropbox");
   mgs.src = "uploadedFiles/"+res;

Now it is updating the image and working the cropping functionality