it-swarm.com.de

so setzen Sie <input type = "file"> zurück

Ich entwickle eine Metro-App mit VS2012 und Javascript

Ich möchte den Inhalt meiner Dateieingabe zurücksetzen:

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

Wie soll ich das machen?

296
Jesus

Die jQuery-Lösung, die @ dhaval-marthak in den Kommentaren gepostet hat, funktioniert offensichtlich, aber wenn Sie sich den eigentlichen jQuery-Aufruf ansehen, ist es ziemlich einfach zu erkennen, was jQuery tut, indem Sie einfach das value-Attribut auf einen leeren String setzen. In "reinem" JavaScript wäre es also:

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

Sie müssen <input type = “file”> in <form>-Tags einschließen, und Sie können die Eingabe dann zurücksetzen, indem Sie Ihr Formular zurücksetzen:

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

Dies ist die beste Lösung:

input.value = ''

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

Von allen Antworten hier ist dies die schnellste Lösung. Kein Eingabeklon, kein Form-Reset! 

Ich habe es in allen Browsern überprüft (es hat sogar die Unterstützung von IE8).

56
Maxmaxmaximus

Sie können es einfach klonen und durch sich selbst ersetzen, wobei alle Ereignisse noch angefügt sind:

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

und

var input = $("#control");

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

Danke: Css-tricks.com

38
pixparker

Falls Sie folgendes haben:

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

dann mach einfach:

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

um die Dateikontrolle zurückzusetzen.

35
sstauross

Eine andere Lösung (ohne HTML-DOM-Elemente auszuwählen)

Wenn Sie den Ereignis-Listener "change" für diese Eingabe hinzugefügt haben, können Sie in Javascript-Code (unter bestimmten Bedingungen) Folgendes aufrufen: 

event.target.value = '';

Zum Beispiel in HTML:

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

Und in 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

LÖSUNG

Der folgende Code hat für mich mit jQuery funktioniert. Es funktioniert in jedem Browser und ermöglicht das Erhalten von Ereignissen und benutzerdefinierten Eigenschaften.

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

DEMO

Siehe this jsFiddle für Code und Demonstration.

LINKS

Siehe Zurücksetzen der Dateieingabe mit JavaScript für weitere Informationen.

26
Gyrocode.com

Das Zurücksetzen einer Datei-Upload-Schaltfläche ist mit pure JavaScript so einfach!

Es gibt nur wenige Möglichkeiten, dies zu tun, aber der unkomplizierte Weg, der in vielen Browsern gut funktioniert, ändert den Wert des Archivs in nichts. Auf diese Weise wird der Upload-Wert zurückgesetzt. Versuchen Sie auch, reines Javascript zu verwenden Code unten, schau einfach mal rein (ES6):

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

16
Alireza

Ich benutze für vuejs 

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

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

Die zurücksetzende Eingabedatei ist sehr einfach

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

Wenn Sie binden, setzen Sie die Datei in einem anderen Feld des Formulars zurück oder laden Sie das Formular mit Ajax.

Dieses Beispiel ist anwendbar

Selektor ist zum Beispiel $('input[type=text]') oder ein beliebiges Element des Formulars

eventclick, change oder ein beliebiges Ereignis

$('body').delegate('event', 'selector', function(){
     $('input[type=file]').val(null) ;
});
8
Ivan Fretes
document.getElementById("uploadCaptureInputFile").value = "";
5

Mit IE 10 habe ich das Problem gelöst mit

    var file = document.getElementById("file-input");
    file.removeAttribute('value');
    file.parentNode.replaceChild(file.cloneNode(true),file);

woher :

<input accept="image/*" onchange="angular.element(this).scope().uploadFile(this)" id="file-input" type="file"/>
5
Alvaro Joao

Benutz einfach:

$('input[type=file]').val('');
3
deepak shinde

Es gibt viele Ansätze und ich werde vorschlagen, mit ref Anhang zu Input zu gehen.

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

um den Wert nach dem Absenden zu löschen.

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

Sie sollten dies versuchen:

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

Sie können das nicht zurücksetzen, da es sich um eine schreibgeschützte Datei handelt. Sie können es klonen, um das Problem zu umgehen. 

2
Ducaz035

Ich hatte das Problem mit dem ng2-Datei-Upload für Angle. Wenn Sie nach der Lösung in angular siehe unten Code suchen

HTML:

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

Komponente

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

@ViewChild('activeFrameinputFile')InputFrameVariable: ElementRef;

this.frameUploader.onSuccessItem = (item, response, status, headers) => {

`this.`**InputFrameVariable**`.nativeElement.value = '';`

};

Mit angle können Sie eine Vorlagenvariable erstellen und den Wert auf null setzen

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

Oder Sie können eine Methode zum Zurücksetzen erstellen 

component.ts

  @ViewChild('fileUploader') fileUploader:ElementRef;

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

Vorlage

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

stackblitz demo

1
malbarmawi

jQuery-Lösung:

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

Das könnte so gemacht werden

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

Funktioniert auch für dynamische Steuerelemente.

Javascript

<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>

Wenn Sie mehrere Dateien in Ihrem Formular haben, aber nur eine davon zurücksetzen möchten: 

wenn Sie boostrap, jquery, filestyle verwenden, um das Eingabedateiformat anzuzeigen:

$("#"+idInput).filestyle('clear');
0
user6087223
document.getElementById('uploadFile').value = "";

Funktioniert, aber wenn Sie Angular verwenden, wird die Eigenschaft "value" für Typ "HTMLElement" nicht gefunden

document.getElementById () gibt den Typ HTMLElement zurück, der keine Werteigenschaft enthält. Also, gießen Sie es in HTMLInputElement

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