web-dev-qa-db-ja.com

JavaScriptを使用してHTMLファイルのアップロードフィールドをクリアする

ユーザーが別のオプションを選択したときに、ファイルアップロードフィールドをリセットしたい。

これはJavaScriptで可能ですか？ファイルアップロード要素は、ユーザーのファイルシステムとやり取りするため、別の方法で処理され、おそらく不変であると考えています。

基本的に、私が欲しいのは（擬似コード）のようなものです：

// Choose selecting existing file
$('#select-file').bind('focus', function() {
  // Clear any files currently selected in #upload-file
  $('#upload-file').val(''); 
}) ;

// Choose uploading new one - this works ok
$('#upload-file').bind('focus', function() {
  // Clear any files currently selected in #select-file
  $('#select-file').val(''); 
}) ;
javascriptjqueryhtmlfile-upload
58
Chris Burgess

ほとんどのブラウザで入力値を設定することはできませんが、できることは、新しい要素を作成し、古い要素から属性をコピーして、2つを交換することです。

次のようなフォームが与えられた場合：

<form> 
    <input id="fileInput" name="fileInput" type="file" /> 
</form>

まっすぐなDOMの方法：

function clearFileInput(id) 
{ 
    var oldInput = document.getElementById(id); 

    var newInput = document.createElement("input"); 

    newInput.type = "file"; 
    newInput.id = oldInput.id; 
    newInput.name = oldInput.name; 
    newInput.className = oldInput.className; 
    newInput.style.cssText = oldInput.style.cssText; 
    // TODO: copy any other relevant attributes 

    oldInput.parentNode.replaceChild(newInput, oldInput); 
}

clearFileInput("fileInput");

シンプルなDOM方法。これは、ファイル入力が気に入らない古いブラウザでは機能しない場合があります。

oldInput.parentNode.replaceChild(oldInput.cloneNode(), oldInput);

JQueryの方法：

$("#fileInput").replaceWith($("#fileInput").val('').clone(true));

// .val('') required for FF compatibility as per @nmit026

JQueryを介してフォーム全体をリセットする： https://stackoverflow.com/a/13351234/1091947

80
Chris Hynes

単に2014年に、IDを持つ入力要素が関数val('')をサポートするようになりました。

入力用-

<input type="file" multiple="true" id="File1" name="choose-file" />

このjsは入力要素をクリアします-

$("#File1").val('');
47
Pradyut Bhattacharya

はい、アップロード要素は異なるブラウザでの直接操作から保護されています。ただし、DOMツリーから要素を消去してから、JavaScriptを使用して新しい要素をその場所に挿入できます。それはあなたに同じ結果を与えるでしょう。

以下のラインに沿ったもの：

$('#container-element').html('<input id="upload-file" type="file"/>');
8
Udo

最終的に使用したコードは、

clearReviewFileSel: function() {
  var oldInput = document.getElementById('edit-file-upload-review-pdf') ;
  var newInput = document.createElement('input');
  newInput.id    = oldInput.id ;
  newInput.type  = oldInput.type ;
  newInput.name  = oldInput.name ;
  newInput.size  = oldInput.size ;
  newInput.class  = oldInput.class ;
  oldInput.parentNode.replaceChild(newInput, oldInput); 
}

提案と指針をお寄せいただきありがとうございます！

5
Chris Burgess

彼らはフォーカスイベントを取得しないので、このようなトリックを使用する必要があります：それをクリアする唯一の方法は、フォーム全体をクリアすることです

<script type="text/javascript">
    $(function() {
        $("#wrapper").bind("mouseover", function() {
            $("form").get(0).reset();
        });
    });
</script>

<form>
<div id="wrapper">
    <input type=file value="" />
</div>
</form>
4
Chad Grant

このように物事をシンプルに保つのが本当に好きです:)

$('input[type=file]').wrap('<form></form>').parent().trigger('reset').children().unwrap('<form></form>');
4
dmi3y

シンプルなソリューション：

document.getElementById("upload-files").value = "";
4
Oleg

このjQueryはIE11、Chrome 53、およびFirefox 49：

cloned = $("#fileInput").clone(true);
cloned.val("");
$("#fileInput").replaceWith(cloned);
3
Chanaka

私にとって完璧に機能する短いversionは次のとおりです。

document.querySelector('#fileUpload').value = "";
3
Frank Waalkens

これをうまくやってみて

document.getElementById('fileUpload').parentNode.innerHTML = document.getElementById('fileUpload').parentNode.innerHTML;
2
Rissa

Ajaxが使用できない場合の互換性のために、.val（ ''）を設定します。そうしないと、入力にまだ存在する最後のajaxでアップロードされたファイルが再送信されます。以下は、.on（）イベントを保持しながら入力を適切にクリアする必要があります。

var input = $("input[type='file']");
input.html(input.html()).val('');
2
aberdat

FormData apiは古いブラウザなどにはあまりフレンドリーではないことを知っていますが、多くの場合、あなたはそれを使用しています（そして、できれば サポートのテスト ）。 ！

function clearFile(form) {
  // make a copy of your form
  var formData = new FormData(form);
  // reset the form temporarily, your copy is safe!
  form.reset();
  for (var pair of formData.entries()) {
    // if it's not the file, 
    if (pair[0] != "uploadNameAttributeFromForm") {
      // refill form value
      form[pair[0]].value = pair[1];
    }
    
  }
  // make new copy for AJAX submission if you into that...
  formData = new FormData(form);
}
1
Abraham Labkovsky

次のものがある場合：

<input type="file" id="FileSelect">

それから：

$("#FileSelect").val('');

最後に選択したファイルをリセットまたはクリアします。

1
Muhammad Awais

このコードを試してください...

$("input[type=file]").wrap("<div id='fileWrapper'/>");
$("#fileWrapper").append("<div id='duplicateFile'   style='display:none'>"+$("#fileWrapper").html()+"   </div>");
$("#fileWrapper").html($("#duplicateFile").html());
1
Niraj

jQueryは、FFおよびChromeで正常に機能するメソッドをテストしました。

$(function(){
    $.clearUploadField = function(idsel){
        $('#your-id input[name="'+idsel+'"]').val("") 
    }
});
1
crisupisu emil

角度のng2-file-uploadの問題に直面しました。 angular by ng2-file-uploadで解決策を探している場合は、以下のコードを参照してください

HTML：

_<input type="file" name="myfile"_ ＃activeFrameinputFileng2FileSelect [uploader]="frameUploader" (change)="frameUploader.uploadAll()" />

コンポーネント

_import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';_

_@ViewChild('_activeFrameinputFile _')_InputFrameVariable _: ElementRef;_

this.frameUploader.onSuccessItem = (item, response, status, headers) => { _this._InputFrameVariable _.nativeElement.value = '';_ _};_

0
Anil Kumar Dyavanapalli