[英]How to clear a previous file from a 'input type' in HTML5 FileReader
I have a file-input: 我有一个文件输入:
<img id="uploadPreview">
<div id="changeImage">Change</div>
<div id="customImage">
<input type="file" id="myfile" multiple style="display:none" onchange="PreviewImage();" />
<div class='upload blank' id="add-image"></div>
</div>
The function is like below: 功能如下:
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("myfile").files[0]);
oFReader.onload = function (oFREvent) {
document.getElementById("uploadPreview").src = oFREvent.target.result;
};
function PreviewImage() {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("myfile").files[0]);
$("#uploadPreview").removeClass('hide'); //for manipulating something in the dom
$('#changeImage').removeClass('hide'); //for manipulating something in the dom
$("#customImage").addClass('hide'); //these are for manipulating something in the dom
oFReader.onload = function (oFREvent) {
document.getElementById("uploadPreview").src = oFREvent.target.result;
};
};
Everything works perfect. 一切正常。 Now I have a Change button.
现在,我有一个更改按钮。 I want if someone clicks on it then previous uploaded file-details to be gone.
我想如果有人单击它,那么以前上传的文件详细信息将消失。 The function is something like below:
该函数如下所示:
$('#changeImage').click(function(){
$('#uploadPreview').addClass('hide');
$('#customImage').removeClass('hide');
//here I want to remove/clear the details about the already previous uploaded file in the 'file-input'. So the same image can be shown if someone clicks it for once again.
});
Can you help on this? 你能帮上忙吗?
If you wish to keep data in other form fields, you can use 如果您希望将数据保留在其他表单字段中,则可以使用
HTML 的HTML
<input type='file' id='yourid' />
jQuery jQuery的
$('#yourid').val('');
this will clear your uploaded file from input tag 这将从输入标签中清除您上传的文件
If you put your file input inside a <form>
tag you can use the built in .reset()
method. 如果将文件输入放在
<form>
标记内,则可以使用内置的.reset()
方法。
HTML: HTML:
<img id="uploadPreview">
<div id="changeImage">Change</div>
<div id="customImage">
<form id="fileform">
<input type="file" id="myfile" multiple style="display:none" onchange="PreviewImage();" />
</form>
<div class='upload blank' id="add-image"></div>
</div>
JS: JS:
$('#changeImage').click(function(){
$('#uploadPreview').addClass('hide');
$('#customImage').removeClass('hide');
// Reset the form
$("#fileform")[0].reset();
});
JS without jQuery: 没有jQuery的JS:
var resetButton = document.getElementById('resetButton');
var fileInput = document.getElementById('fileInput');
var form = document.getElementById('form');
resetButton.addEventListener('click', function () {
// resetting the file input only
fileInput.value = null;
// alternatively: resetting the entire form (works in older browsers too)
form.reset();
});
In React
I experienced this issue for file inputs on chrome-based browsers. 在
React
我在基于chrome的浏览器上输入文件时遇到了这个问题。 I fixed it with a combination of value=""
and autoComplete={"new-password"}
我使用
value=""
和autoComplete={"new-password"}
的组合修复它
<input
value=""
type="file"
autoComplete={"new-password"}
onChange={e => pickHandler(e)}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.