Замените изображение, когда другое Изображение закачанного

Question

У меня есть DIV, который используется для pupup изображений для обрезки

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

назвать «всплывающее окно» ДИВ из DIV «контейнер» Я использую

<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> 

Мой всплывающее ДИВ является

<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>  

когда я загрузить изображение, изображение должно заменить существующий образ .. Я называю OnClick от первого div, о котором я упоминал. и я пытаюсь изменить изображение, когда пользователь просматривать новую картину, но я не могу обновить/заменить картину, которую я использовал ниже JavaScript, чтобы изменить его динамически

<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> 

, но он не работает, пожалуйста, скажите мне, куда я иду неправильный.

Он будет работать, если я не использую функцию посева с ним.

Answer 1

Я просто вызвать функцию яваскрипта сделать посев на изображение на кнопку мыши для вызова изображению

как

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

My Javascript функция

<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> 

Я использовал этот код для улучшения изображения

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

Теперь он обновляет изображение и работает с возможностью обрезки

Answer 2

<script> 

    function setpic() 
    { 
     var d = new Date(); 
     var n = d.getTime(); 
     var im=document.getElementById("cropbox"); 
     alert(im.src); 
     im.src="uploadedFiles/reek.jpg?"+n; 
    } 
    </script> 

Добавление текущей метки времени на изображение обновит изображение.