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

【问题标题】：How to clear a previous file from a 'input type' in HTML5 FileReader如何从 HTML5 FileReader 中的“输入类型”中清除以前的文件
【发布时间】：2013-11-27 19:55:27
【问题描述】：

我有一个文件输入：

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

});

你能帮忙吗？

【问题讨论】：

stackoverflow.com/questions/1043957/…

标签： javascript html jquery filereader

【解决方案1】：

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

HTML

    <input type='file' id='yourid' />

jQuery

    $('#yourid').val('');

这将从输入标签中清除您上传的文件

【讨论】：

或者纯javascript：let file_picker = document.getElementById('yourid'); file_picker.value = '';

【解决方案2】：

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

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：

$('#changeImage').click(function(){
   $('#uploadPreview').addClass('hide');
   $('#customImage').removeClass('hide');
   // Reset the form
   $("#fileform")[0].reset();
});

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

【讨论】：

没有 jQuery 怎么办？
@Thomas David Kehoe：用不带 jQuery 的示例更新了我的答案。

【解决方案3】：

在React 中，我在基于 chrome 的浏览器上遇到了文件输入问题。我用value="" 和autoComplete={"new-password"} 的组合修复了它

<input
  value=""
  type="file"
  autoComplete={"new-password"}
  onChange={e => pickHandler(e)}
/>

【讨论】：

在 Vue 中，我可以通过将输入值设置为空字符串来类似地修复它。