ファイルタイプのINPUT要素の値をクリア（リセット）するJavaScriptメソッド

この記事の例では、JavaScriptでファイルタイプのINPUT要素の値をクリア（リセット）する方法を説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

セキュリティ上の制限により、スクリプトは値を任意に設定できないため、他のフォーム入力フィールドのように属性を使用してリセットすることはできません。

ファイルフィールドの値をリセットするには、主に 3 つの方法があります。

この記事では、ブラウザーの互換性、これら 3 つの方法の長所と短所を分析し、比較的完璧な包括的なソリューションのコードとデモを示します。

ファイル ドメインをリセットする 3 つの方法:

1. value 属性を空に設定します。

IE11 以降およびその他の新しい非 IE モダンブラウザ Chrome/Firefox/Opera に有効です。

2. 置き換える新しいファイル入力要素を作成するか、コピーします。

createElement または cloneNode を使用して、すべてのブラウザーに適した置換用の新しい要素を複製または作成します。欠点も明らかです。つまり、置換後、元々バインドされていたイベント リスナーが失われ、一部のカスタム Expando 属性が失われます。この問題なく使用できますが、この方法を使用することはお勧めしません。

3. form要素のreset()メソッドを呼び出します。

form要素のreset()メソッドは、フォーム内のすべての入力要素をリセットします。これは私たちが期待しているものではないので、これを回避して、新しいフォームオブジェクトを作成し、その中にファイル入力要素を入れてリセットします。 , そして、ファイル入力要素を取り出して元の位置に戻すと、方法 2 のデメリットは発生しません。

方法1と方法3を組み合わせて使用​​すると、すべてのブラウザに対応できます。

JavaScript 関数のコードは次のとおりです:

function clearInputFile(f){
  if(f.value){
    try{
      f.value = ''; //for IE11, latest Chrome/Firefox/Opera...
    }catch(err){
    }
    if(f.value){ //for IE5 ~ IE10
      var form = document.createElement('form'), ref = f.nextSibling, p = f.parentNode;
      form.appendChild(f);
      form.reset();
      p.insertBefore(f,ref);
    }
  }
}