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

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

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

注：ページを再読み込みしたり、フォームをリセットしたり、AJAX呼び出しを実行したりする必要はありません。

これは可能ですか？

そのノードを削除して、同じ名前で新しいノードを作成するのはどうですか？

JavaScriptでファイル入力をクリアするには3つの方法があります。

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

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

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

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

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

tl; dr：最新のブラウザの場合は、

input.value = '';

古い答え：

どうですか：

input.type = "text";
input.type = "file";

これがwebkitで機能しない理由を私はまだ理解する必要があります。

とにかく、これはIE9>、Firefox、Operaで動作します。
webkitの状況は、ファイルに戻すことができないようです。
IE8では、セキュリティ例外がスローされるのが現状です。

編集： webkit、Opera、firefoxの場合、これは機能しますが、

input.value = '';

（この提案で上記の回答を確認してください）

GCを必要とせずにこのクロスブラウザを実行する、よりクリーンな方法を見つけることができるかどうかを確認します。

Edit2：

try{
    inputs[i].value = '';
    if(inputs[i].value){
        inputs[i].type = "text";
        inputs[i].type = "file";
    }
}catch(e){}

ほとんどのブラウザで動作します。IE <9では動作しません、それだけです。
firefox 20、chrome 24、opera 12、IE7、IE8、IE9、IE10でテスト済み。

値をに設定し''ても、すべてのブラウザーで機能するわけではありません。

代わりに、次のnullように値を設定してみてください。

document.getElementById('your_input_id').value= null;

編集：私はJSがファイル入力を設定できないようにする非常に有効なセキュリティ上の理由を得ますが、すでに選択されている出力をクリアするための簡単なメカニズムを提供することは合理的であるようです。空の文字列を使用してみましたが、すべてのブラウザでNULLは機能せず、試したすべてのブラウザ（Opera、Chrome、FF、IE11 +、Safari）で機能しました。

編集：NULL空の文字列に設定するとすべてのブラウザで動作するように設定されましたが、動作しないことに注意してください。

残念ながら、上記の回答のどれもすべてのベースをカバーしているようには見えません-少なくとも私のバニラJavaScriptでのテストでは。

• .value = nullFireFox、Chome、Opera、IE11で動作するようです（ただしIE8 / 9/10では動作しません）

• .cloneNode（そして.clone()jQueryでは）FireFoxでは.valueオーバーコピーされているように見えるため、クローンは無意味になります。

だから、FireFox（27と28）、Chrome（33）、IE（8、9、10、11）、Opera（17）で動作する私が書いたバニラJavaScript関数は次のとおりです...これらは現在利用可能な唯一のブラウザーですテストする私に。

function clearFileInput(ctrl) {
  try {
    ctrl.value = null;
  } catch(ex) { }
  if (ctrl.value) {
    ctrl.parentNode.replaceChild(ctrl.cloneNode(true), ctrl);
  }
}

ctrlパラメータは、ファイル入力そのものなので、関数が呼ばれます...

clearFileInput(document.getElementById("myFileInput"));

解決

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

var $el = $('#your-input-id');
$el.wrap('<form>').closest('form').get(0).reset();
$el.unwrap();

デモ

コードとデモについては、このjsFiddleを参照してください。

リンク

• jQueryを使用して<input type = 'file' />をクリアする

• JavaScriptでファイル入力をリセットする方法

新しいファイル入力に置き換える必要があります。jQueryでこれを行う方法は次のとおりです。

var inputFile = $('input[type=field]');
inputFile.wrap('<div />');

入力フィールドをクリアする必要がある場合は、この行を使用します（たとえば、いくつかのイベントで）：

inputFile.parent().html( inputFile.parent().html() );

document.getElementById('your_input_id').value=''

編集：
これはIEとオペラでは機能しませんが、Firefox、Safari、Chromeでは機能するようです。

私は同じ問題を抱えていて、これを思いつきました。

var file = document.querySelector('input');
var emptyFile = document.createElement('input');
emptyFile.type = 'file';

document.querySelector('button').onclick = function(){
  file.files = emptyFile.files;
}

<input type='file'>
<button>clear</button>

それは実際には非常に簡単です。

document.querySelector('#input-field').value = '';

私はHTMLファイル入力をクリアするシンプルでクリーンな方法を探していましたが、上記の答えは素晴らしいですが、私が探しているものに実際に答える方法はありません。

var $input = $("#control");

$input.replaceWith($input.val('').clone(true));

すべてのクレジットはChris Coyierに送られます。

// Referneces
var control = $("#control"),
    clearBn = $("#clear");

// Setup the clear functionality
clearBn.on("click", function(){
    control.replaceWith( control.val('').clone( true ) );
});

// Some bound handlers to preserve when cloning
control.on({
    change: function(){ console.log( "Changed" ) },
     focus: function(){ console.log(  "Focus"  ) }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" id="control">
<br><br>
<a href="#" id="clear">Clear</a>

上記の回答は、次の理由でやや不器用なソリューションを提供します。

1. 私はに持っ好きではない、それは非常に複雑で汚れている、最初にして、HTMLを取得します。wrapinput

2. クロスブラウザーJSは便利です。この場合、未知数が多すぎtypeて、切り替えを確実に使用できず（これも少しダーティです）、次のように設定valueします。''

だから私はあなたに私のjQueryベースのソリューションを提供します：

$('#myinput').replaceWith($('#myinput').clone())

それはそれが言うことを行い、入力をそれ自体のクローンで置き換えます。クローンではファイルが選択されません。

利点：

1. シンプルで理解しやすいコード
2. 不器用なラッピングやタイプの切り替えはありません
3. ブラウザー間の互換性（ここで間違っている場合は修正してください）

結果：幸せなプログラマ

これが私の2セントです。入力ファイルは配列として保存されるので、これをnullにする方法です。

document.getElementById('selector').value = []

これは空の配列を返し、すべてのブラウザで機能します

私を助けたのは、キューをクリアするのではなく、ループを使用して最後に選択したファイルをフェッチしてアップロードしようとしたところ、うまくいきました。これがコードです。

for (int i = 0; i <= Request.Files.Count-1; i++)
{
 HttpPostedFileBase uploadfile = files[i];
 Stream fs = uploadfile.InputStream;
 BinaryReader br = new BinaryReader(fs);
 Byte[] imageBytes = br.ReadBytes((Int32)fs.Length);
}

これが一部に役立つことを願っています。

私はほとんどの解決策を試しましたが、誰も動作しないようでした。しかし、私はそれの下に散歩を見つけました。

フォームの構造は、form=> label、inputおよびsubmit buttonです。ファイルを選択した後、JavaScriptで手動でファイル名を指定すると、ラベルにファイル名が表示されます。

だから私の戦略は、最初は送信buttonが無効にされ、ファイルが選択された後、送信ボタンdisabled属性が削除されてファイルを送信できるようになります。送信後label、ファイルをクリアしたように見えるをクリアしますinputが、実際にはいません。次に、フォームを送信しないように、送信ボタンを再度無効にします。

送信を設定するbutton disableかどうかによって、別のファイルを選択しない限り、ファイルの送信が何度も停止されます。

テキストを入力し、setAttributeを使用してファイルに戻すように変更しました

'<input file-model="thefilePic" style="width:95%;" type="file" name="file" id="filepicture" accept="image/jpeg" />'

'var input=document.querySelector('#filepicture');'

if(input != null)
{
    input.setAttribute("type", "text");
    input.setAttribute("type", "file");
}