如何从HTML5 FileReader中的“输入类型”清除先前的文件

Question

我有文件输入：

<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>

功能如下：

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

一切正常。现在，我有一个更改按钮。我想如果有人单击它，那么以前上传的文件详细信息将消失。该函数如下所示：

$('#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. 

});

您能帮上忙吗？

Answer 1

如果将文件输入放在<form>标记内，则可以使用内置的.reset()方法。

Answer 2

如果您希望将数据保留在其他表单字段中，则可以使用

Answer 3

在React中，我在基于chrome的浏览器中输入文件时遇到此问题。我用value=""和autoComplete={"new-password"}