web-dev-qa-db-ja.com

ファイル入力をリセット（クリア）する方法

iEでファイル入力をリセットするにはどうすればよいですか？次を使用しましたが、chromeおよびFFでは機能しましたが、IEでは機能しませんでした

fileInputElement.value=""

IEの代替手段は何ですか？

javascriptinternet-explorercross-browserfile-io
15
Sami Al-Subhi

fileInputElementがそれ自体でfileInputFormの形式である場合、次のことができます。

window.fileInputForm.reset();

それ以外の場合、IEの場合、要素をクローンに置き換える必要があります。

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

解決

次のコードは、jQueryで機能しました。すべてのブラウザで機能し、イベントとカスタムプロパティを保持できます。

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

デモ

コードとデモンストレーションについては、 this jsFiddle を参照してください。

リンク

5
Gyrocode.com

VanillaJSの@ 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);
  }

}
4
Frank Adler

ファイル入力を単独でリセットすることはできません。できることは、ファイル入力を_<form id="form_id">_タグでラップし、フォームをリセットすることです。 jQueryでは$('#form_id')[0].reset();を実行でき、JavaScriptではdocument.getElementById('form_id').reset()を実行できます。

4
Gavin

IE 1で問題を解決しました：

    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"/>
0
Alvaro Joao