web-dev-qa-db-ja.com

<input type = "file">をリセットする方法

私はVS2012とJavascriptを使って地下鉄アプリを開発しています

ファイル入力の内容をリセットします。

<input type="file" id="uploadCaptureInputFile" class="win-content colors" accept="image/*" />

どうすればいいの？

javascriptvisual-studio-2012winjs
312
Jesus

@ dhaval-marthakがコメントに投稿したjQueryソリューションは明らかに機能しますが、実際のjQuery呼び出しを見ると、jQueryが何をしているのかを確認するのは非常に簡単です。単にvalue属性を空ストリングに設定します。したがって、「純粋な」JavaScriptでは、次のようになります。

document.getElementById("uploadCaptureInputFile").value = "";
284
jakerella

<input type = “file”>を<form>タグにラップする必要があります。その後、フォームをリセットすることで入力をリセットできます。

onClick="this.form.reset()"
75
levkaster

これが最善の解決策です。

input.value = ''

if(!/safari/i.test(navigator.userAgent)){
  input.type = ''
  input.type = 'file'
}

ここにあるすべての答えのうち、これが最速の解決策です。入力クローンなし、フォームリセットなし

私はすべてのブラウザでそれをチェックした（それはIE8をサポートさえしている）。

58
Maxmaxmaximus

クローンを作成してそれを自分自身で置き換えることができます。ただし、すべてのイベントはまだ添付されています。

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

そして

var input = $("#control");

function something_happens() {
    input.replaceWith(input.val('').clone(true));
};

ありがとう：Css-tricks.com

39
pixparker

次のような場合

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

それからちょうどしなさい：

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

ファイルコントロールをリセットします。

35
sstauross

他の解決策（HTML DOM要素を選択せず​​に）

その入力に 'change'イベントリスナを追加した場合は、JavaScriptコードで次のように呼び出すことができます（指定された条件に対して）

event.target.value = '';

例えばHTMLでは：

<input type="file" onChange="onChangeFunction(event)">

そしてJavaScriptで：

onChangeFunction(event) {
  let fileList = event.target.files;
  let file = fileList[0];
  let extension = file.name.match(/(?<=\.)\w+$/g)[0].toLowerCase(); // assuming that this file has any extension

  if (extension === 'jpg') {
    alert('Good file extension!');
  }
  else {
    event.target.value = '';
    alert('Wrong file extension! File input is cleared.');
  }
33
indreed

溶液

以下のコードは私にとってjQueryでうまくいきました。すべてのブラウザで機能し、イベントとカスタムプロパティを保存することができます。

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

デモ

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

リンク

詳細は JavaScriptでファイル入力をリセットする方法 を参照してください。

27
Gyrocode.com

pure JavaScript ！を使用すると、ファイルのアップロードボタンをリセットするのがとても簡単です。

それをするにはいくつかの方法がありますが、多くのブラウザでうまく機能しているに違いないので、アップロードされた値はリセットされます。以下のコードは、チェックしてください（ES6）。

function resetFile() {
  const file = document.querySelector('.file');
  file.value = '';
}
<input type="file" class="file" />
<button onclick="resetFile()">Reset file</button>
18
Alireza

私はvuejsに使う

   <input
          type="file"
          ref="fileref"
          @change="onChange"/>

this.$refs.fileref.value = ''
8
anson

リセットする入力ファイルは非常に単一です

$('input[type=file]').val(null);

あなたがバインドする場合は、フォームの他のフィールドを変更してファイルをリセットするか、ajaxでフォームをロードします。

この例は適切です

セレクタ たとえば$('input[type=text]')であるか、または形態の任意の要素

event click、change、または任意のイベント

$('body').delegate('event', 'selector', function(){
     $('input[type=file]').val(null) ;
});
7
Ivan Fretes

IE 10 の場合：

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

ただ使用してください：

$('input[type=file]').val('');
3
deepak shinde
document.getElementById("uploadCaptureInputFile").value = "";
3
Jalaleddin Hosseini

多くのアプローチがあり、入力への参照添付を使用することをお勧めします。

<input
    id="image"
    type="file"
    required
    ref={ref => this.fileInput = ref}
    multiple
    onChange={this.onFileChangeHandler}
/>

送信後に値をクリアします。

this.fileInput.value = "";
2
Sourabh Bhutani

あなたはこれを試すべきです：

$("#uploadCaptureInputFile").val('');
2
Muhammad Awais

角度付きでテンプレート変数を作成し、その値をnullに設定することができます。

<input type="file" #fileUploader />
<button (click)="fileUploader.value = null">Reset from UI</button>

あるいは、このようにリセットするためのメソッドを作成することができます。

component.ts

  @ViewChild('fileUploader') fileUploader:ElementRef;

  resetFileUploader() { 
    this.fileUploader.nativeElement.value = null;
  }

テンプレート

<input type="file"/>
<button (click)="resetFileUploader()">Reset from Component</button>

stackblitzデモ

2
malbarmawi

読み取り専用ファイルなので、リセットすることはできません。問題を回避するために複製できます。

2
Ducaz035
document.getElementById('uploadFile').value = "";

動作しますが、Angularを使用すると、「Property 'value'はタイプ 'HTMLElement'.anyに存在しません」と表示されます。

document.getElementById（）は、valueプロパティを含まないHTMLElement型を返します。それで、それをHTMLInputElementにキャストしてください。

(<HTMLInputElement>document.getElementById('uploadFile')).value = "";
2
P Satish Patro

jQueryソリューション：

    $('input').on('change',function(){
                $(this).get(0).value = '';
                $(this).get(0).type = '';
                $(this).get(0).type = 'file';
            });
1
panatoni

これはこのようにすることができます

var inputfile= $('#uploadCaptureInputFile')
$('#reset').on('click',function(){
inputfile.replaceWith(inputfile.val('').clone(true));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="file" id="uploadCaptureInputFile" class="win-content colors" accept="image/*" />
<a href="" id="reset">Reset</a>
1
Fraz Abbas
var fileInput = $('#uploadCaptureInputFile');
fileInput.replaceWith(fileInput.val('').clone(true));
0
Kld

私は角度のためのng2ファイルアップロードで問題に直面しました。あなたが角度で解決策を探しているならコードの下を参照してください

HTML：

<input type="file" name="myfile" #activeFrameinputFile ng2FileSelect [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

動的コントロールにも機能します。

ジャバスクリプト

<input type="file" onchange="FileValidate(this)" />

function FileValidate(object) {
    if ((object.files[0].size / 1024 / 1024) > 1) {   //greater than 1 MB         
        $(object).val('');
    }     
}

JQuery

<input type="file" class="UpoloadFileSize">

$(document).ready(function () {

    $('.UpoloadFileSize').bind('change', function () {                
        if ((this.files[0].size / 1024000) > 1.5) { //greater than 1.5 MB
            $(this).val('');
            alert('Size exceeded !!');
        }
    });

});
0
Arun Prasad E S
function resetImageField() {
      var $el = $('#uploadCaptureInputFile');                                        $el.wrap('<form>').closest('form').get(0).reset();
    $el.unwrap();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="uploadCaptureInputFile" class="win-content colors" accept="image/*" />
<button onclick="resetImageField()">Reset field</button>
0
Md. Abu Bakker Siddique

フォームに複数のファイルがあり、そのうちの1つだけをリセットしたい場合は、次のようにします。

boostrap、jquery、filestyleを使って入力ファイル形式を表示すると、

$("#"+idInput).filestyle('clear');
0
user6087223