如何重置(清除）文件输入

how to reset (clear) file input

本文关键字：文件 输入 清除 何重置      更新时间：2023-09-26

如何在IE中重置文件输入，我使用了以下方法，它在chrome和FF中工作，但在IE 中无效

fileInputElement.value=""

IE中有什么替代方案？

如果fileInputElement以fileInputForm的形式单独存在，则可以执行：

window.fileInputForm.reset();

否则，对于IE，您将不得不用克隆替换元素：

fileInputElement.parentNode.replaceChild(
    fileInputElement.cloneNode(true), 
    fileInputElement
);

解决方案

下面的代码适用于我的jQuery。它适用于所有浏览器，并允许保留事件和自定义属性。

var $el = $(fileInputElement);
$el.wrap('<form>').closest('form').get(0).reset();
$el.unwrap();

演示

有关代码和演示，请参阅此jsFiddle。

链接

  • 清除<输入类型="文件"/>使用jQuery

  • 如何使用JavaScript 重置文件输入

@Gyrocode.com提供的跨浏览器解决方案

var clearFileInput = function (input) {
  if (!input) {
    return;
  }
  // standard way - works for IE 11+, Chrome, Firefox, webkit Opera
  input.value = null;
  if (input.files && input.files.length && input.parentNode) {
    // workaround for IE 10 and lower, pre-webkit Opera
    var form = document.createElement('form');
    input.parentNode.insertBefore(form, input);
    form.appendChild(input);
    form.reset();
    form.parentNode.insertBefore(input, form);
    input.parentNode.removeChild(form);
  }
}

您不能自行重置File输入。您可以做的是将File输入包装在<form id="form_id">标记中并重置表单。使用jQuery，您可以执行$('#form_id')[0].reset();，使用JavaScript，您可以进行document.getElementById('form_id').reset()。

使用IE 10我用解决了问题

    var file = document.getElementById("file-input");
    file.removeAttribute('value');
    file.parentNode.replaceChild(file.cloneNode(true),file);

其中：

<input accept="image/*" onchange="angular.element(this).scope().uploadFile(this)" id="file-input" type="file"/>
相关文章：