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

Source

尝试

 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();
            }

收件人：

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

Answer 2

调试后我知道 jcrop 没有破坏他的实例，所以我使用下面的行来避免重复。

jcrop_api.destroy();

jsp 中的文件上传清除

File upload clearing in jsp

html

javascript

jsp

struts-1