Javascript jsp中的文件上传清除
场景是上传和预览裁剪图像并保存。一切都很好,但当我上传图像并按下“取消”按钮时,该对话框将进行裁剪并尝试上传另一个文件,同时在预览中显示上一幅图像。i、 e预览以前的和最新的文件。我只想要最近上传的文件。i、 我想清除以前的上传 以下是jsp代码:Javascript jsp中的文件上传清除,javascript,html,jsp,struts-1,Javascript,Html,Jsp,Struts 1,场景是上传和预览裁剪图像并保存。一切都很好,但当我上传图像并按下“取消”按钮时,该对话框将进行裁剪并尝试上传另一个文件,同时在预览中显示上一幅图像。i、 e预览以前的和最新的文件。我只想要最近上传的文件。i、 我想清除以前的上传 以下是jsp代码: function imageHandler(e2) { document.getElementById("cropbox").src = e2.target.resu
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>
试一试
致:
在调试之后,我知道jcrop并没有销毁他的实例,所以我使用了下面这行代码来避免重复
jcrop_api.destroy();
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 = "";
}
}
jcrop_api.destroy();