The scenario is to upload and preview image for crop and save it. Every thing is working fine but when i'm uploading the image and press cancel the dialog for cropping and trying to upload another file its showing the previous image in preview as well. i.e previewing the previous and latest file both. I want only recent uploaded file. i.e want to clear the previous upload.
Here is the jsp code:
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>
After debugging I came to know that jcrop is not destroying his instance so i've used the following line to avoid duplicate.
jcrop_api.destroy();