☰

JavaScript で HTML ファイル入力をクリアするにはどうすればいいですか? 質問する

tag-icon • tag-icon javascript html input-type-file
JavaScript で HTML ファイル入力をクリアするにはどうすればいいですか? 質問する

フォーム内のファイル入力をクリアしたい。

ソースを同じ方法に設定する方法は知っていますが、その方法では選択したファイル パスは消去されません。

注: ページを再読み込みしたり、フォームをリセットしたり、AJAX 呼び出しを実行したりする必要は避けたいです。

これは可能ですか？

ベストアンサー1

JavaScript を使用してファイル入力をクリアする方法は 3 つあります。

  1. 値プロパティを空または null に設定します。

IE11+ およびその他の最新ブラウザで動作します。

  1. 新しいファイル入力要素を作成し、古いものを置き換えます。

    欠点は、イベント リスナーと expando プロパティが失われることです。

  2. form.reset() メソッドを使用して所有者フォームをリセットします。

同じ所有者フォーム内の他の入力要素に影響を与えないようにするには、新しい空のフォームを作成し、この新しいフォームにファイル入力要素を追加してリセットします。この方法はすべてのブラウザーで機能します。

JavaScript 関数を書きました。デモ: http://jsbin.com/muhipoye/1/

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'),
                parentNode = f.parentNode, ref = f.nextSibling;
            form.appendChild(f);
            form.reset();
            parentNode.insertBefore(f,ref);
        }
    }
}

おすすめ記事