jsp中的文件上傳清除

Question

該方案是上傳並預覽圖像以進行裁剪並保存。每件事情都很好，但是當我上傳圖片並按下取消對話框進行裁剪並嘗試上傳另一個文件時，它會在預覽中顯示上一張圖片。即預覽前一個和最新的文件。我只想要最近上傳的文件。即要清除以前的上傳。

這裏是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 = ""; 
    } 
}