Очистка загрузки файлов в jsp

Question

Сценарий - загрузить и просмотреть изображение для урожая и сохранить его. Все отлично работает, но когда я загружаю изображение и отжимаю диалог обрезки и пытаюсь загрузить другой файл, он также показывает предыдущее изображение в предварительном просмотре. i.e предварительный просмотр предыдущего и последнего файла. Я хочу только недавно загруженный файл. я хочу удалить предыдущую загрузку.

Вот код JSP:

 function imageHandler(e2) 
       { 
        document.getElementById("cropbox").src = e2.target.result; 

        initJcrop(); 
        $("#dialog").dialog({ 
         show: { 
          effect: "blind", 
          duration: 1000 
         } , 

         width:document.getElementById('cropbox').height 

        }); 
       } 
       function readFile(e1){ 

        var filename = document.getElementById('imageId').files[0]; 
        var fr = new FileReader(); 
        fr.readAsDataURL(filename); 
        fr.onload = imageHandler; 

        document.getElementById("isSubmit").value = "false"; 
        // document.getElementById("postForm").submit(); 
       } 



         <span id="reuploadImg" ><html:file name="uf" property="file" size="37" onchange="readFile(this)" styleId="imageId" /></span> 
<div id="dialog" style="display: none" title="Preview"> 
           <img id="cropbox"> 
           <br/><br/> 
           <div style="width: 100%;text-align: center"> 
           <input type="button" value="Save" 

    onclick="cropPic()" class="stdbutton"/> 
            <input type="button" value="Cancel" onclick="closeDialog()" class="stdbutton"/>        </div> 
           </div> 

Answer 1

После отладки я узнал, что jcrop не уничтожает его экземпляр, поэтому я использовал следующую строку, чтобы избежать дублирования.

jcrop_api.destroy(); 

Answer 2

Source

TRY

CHANGE: 

function imageHandler(e2) 
      { 
       document.getElementById("cropbox").src = e2.target.result; 

       initJcrop(); 
       $("#dialog").dialog({ 
        show: { 
         effect: "blind", 
         duration: 1000 
        } , 

        width:document.getElementById('cropbox').height 

       }); 
      } 
      function readFile(e1){ 

       var filename = document.getElementById('imageId').files[0]; 
       var fr = new FileReader(); 
       fr.readAsDataURL(filename); 
       fr.onload = imageHandler; 

       document.getElementById("isSubmit").value = "false"; 
       // document.getElementById("postForm").submit(); 
      } 

TO:

imageHandler(e2) 

       initJcrop(); 
       $("#dialog").dialog({ 
        show: { 
         effect: "blind", 
         duration: 1000 
        } , 

        width:document.getElementById('cropbox').height 

       }); 
      } 
function readFile() { 
    var preview = document.querySelector('#cropbox'); 
    var file = document.querySelector('#imageId').files[0]; 
    var reader = new FileReader(); 

    reader.onloadend = function() { 
    preview.src = reader.result; 
    imageHandler; 

    } 
    if (file) { 
    reader.readAsDataURL(file); 
    } else { 
    preview.src = ""; 
    } 
}