如何重置（清除）文件輸入

Question

我怎樣才能在IE中重置文件輸入，我使用了以下內容，它在chrome和FF中工作，但不是IE

fileInputElement.value=""

IE中的替代品是什么？

Answer 1

如果fileInputElement在fileInputForm形式中fileInputForm ，您可以：

window.fileInputForm.reset();

否則對於IE，你必須用克隆替換元素：

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

Answer 2

解

以下代碼適用於jQuery。 它適用於每個瀏覽器，並允許保留事件和自定義屬性。

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

DEMO

有關代碼和演示，請參閱此jsFiddle 。

鏈接

• 使用jQuery清除<input type ='file'/>

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

Answer 3

您無法自行重置文件輸入。 您可以做的是將您的文件輸入包裝在<form id="form_id">標記中並重置表單。 使用jQuery，你可以做$('#form_id')[0].reset(); 在JavaScript中你可以做document.getElementById('form_id').reset() 。

Answer 4

@ Gyrocode.com在vanilla JS中的跨瀏覽器解決方案：

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

}

Answer 5

使用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"/>