Zurücksetzen von <input type = "file">

401

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

Jesus
quelle
1
Was meinst du mit Inhalt?
Maess
3
Meinen Sie, nachdem der Benutzer eine Datei ausgewählt hat, möchten Sie die ausgewählte Datei auf "nichts" zurücksetzen?
Ddavison
9
Mögliches Duplikat von stackoverflow.com/questions/1043957/…
Dhaval Marthak
14
Es scheint, dass ein einfacher inputElement.value = ""Trick den Trick gut macht, ohne wie vorgeschlagen auf das Klonen oder Verpacken zurückzugreifen. Arbeitet in CH (46), IE (11) und FF (41)
Robert Koritnik

Antworten:

372

Die jQuery-Lösung, die @ dhaval-marthak in den Kommentaren gepostet hat, funktioniert offensichtlich, aber wenn Sie sich den tatsächlichen jQuery-Aufruf ansehen, ist es ziemlich einfach zu erkennen, was jQuery tut, indem Sie einfach das valueAttribut auf eine leere Zeichenfolge setzen. In "reinem" JavaScript wäre es also:

document.getElementById("uploadCaptureInputFile").value = "";
Jordan Kasper
quelle
15
Vielen Dank! Wenn Sie die jquery-Referenz ohnehin bereits haben, funktioniert $ input.val ("") wie gewohnt.
Natan
@ 2ndGAB Hmm ... Ich habe nur 45.0.1, also kann ich nicht testen ... noch jemand?
Jordan Kasper
@ 2ndGAB Correction, My Firefox wurde gerade auf 46.0.1 aktualisiert und dieser Code funktioniert dort immer noch. Kannst du bestätigen?
Jordan Kasper
@jakerella, das ist seltsam, für mich löst das Festlegen eines Auswahlwerts für die Eingabedatei eine Sicherheitsausnahme aus. Die einzige Lösung, die ich erfolgreich benutze, ist$(#myfileselector).trigger('fileselect', [1, ""]);
Fralbo
3
input.type = ''; input.type = 'file'; // genießen
Maxmaxmaximus
81

Sie müssen wickeln , <input type = “file”>um <form>Tags und dann können Sie Eingabe zurücksetzen , indem Sie das Formular zurückzusetzen:

onClick="this.form.reset()"
levkaster
quelle
7
Dies ist die richtige Methode. Es funktioniert in allen Browsern und widerspricht keinem Schutz, den Browser implementieren, um zu verhindern, dass unerwünschte Skripte mit dem .value der Dateieingabe herumspielen.
Eugene Ryabtsev
9
Ein bisschen cool, aber nicht für mich, weil es auch andere Felder in diesem Formular zurücksetzt.
Starwave
2
Eine ähnliche jQuery-Lösung könnte sein $("form").get(0).reset();. Das .get(0)gibt das eigentliche Formularelement zurück, damit Sie die reset()Funktion verwenden können.
Teewuane
74

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 Eingabe-Klon, kein Zurücksetzen des Formulars!

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

Maxmaxmaximus
quelle
4
Gibt es einen bestimmten Grund, das input.typeebenfalls zurückzusetzen? Wenn Sie nur den Wert auf ''einstellen, erhalten Sie das erwartete Ergebnis.
Harshita Sethi
Wird ein onchangeEreignis in MS Edge ausgelöst?
Hotohoto
@hotohoto Ich weiß nicht, ich habe Mac
OS
1
Dies erfordert weitere Upvotes oder ähnliches. Ich habe viel zu lange gebraucht, um diese Antwort zu finden. Dies ist die einzige, die ich gefunden habe und die im IE funktioniert.
sch
input.value = '' löst eine Ausnahme für die Konsole in IE11 aus. Das Zurücksetzen von input.type funktioniert jedoch in allen Browsern ohne Fehler.
Miroslav Jasso
45

Falls Sie Folgendes haben:

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

dann mach einfach:

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

um das Dateisteuerelement zurückzusetzen.

sstauross
quelle
6
Beste Lösung IMHO.
Serhii Maksymchuk
3
Oder verwenden Sie DOM:inputFileEl.value = '';
Ninh Pham
44

Sie können es einfach klonen und durch sich selbst ersetzen, wobei alle Ereignisse noch angehängt sind:

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

und

var input = $("#control");

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

Danke: Css-tricks.com

pixparker
quelle
1
Leider wird der Eingabewert dadurch nicht zurückgesetzt, siehe diese jsFiddle . Eine bessere Lösung finden Sie in dieser Antwort .
Gyrocode.com
1
@ Gyrocode.com Diese jsFiddle funktioniert nicht, wenn das Bild nach dem Zurücksetzen ein zweites Mal hochgeladen wird.
Sarthak Singhal
2
@SarthakSinghal, Leider haben Sie den falschen Code geschrieben, Sie hätten jsfiddle.net/cL1LooLe
Roger Russel
2
@ RogerRussel: Genau ... Ich habe mich gefragt, warum die oberen Antworten sagten, dass es nur einmal funktioniert, was ein klarer Indikator dafür ist, dass irgendeine Art von Referenz verloren geht. Und das war tatsächlich der Fall, weil zunächst die Eingabereferenz erstellt wurde, die später durch ein neues Eingabeelement ersetzt wurde.
Robert Koritnik
1
Das Zurücksetzen von valueÄhnlichem in anderen Antworten scheint viel einfacher zu sein als das Manipulieren des DOM.
CodeFinity
40

Eine andere Lösung (ohne Auswahl von HTML-DOM-Elementen)

Wenn Sie für diese Eingabe den Ereignis-Listener 'change' hinzugefügt haben, können Sie im 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.');
  }
indreed
quelle
Ein anderer Weg zu angle2: stackoverflow.com/questions/40165271/…
Belter
Dies funktioniert nur bei Dateinamen, die nur einen einzigen .vor der Dateierweiterung enthalten.
Ma Kobi
Das ist richtig, ich habe den Code bearbeitet und einen universelleren Ansatz bereitgestellt, um eine Dateierweiterung zu erhalten.
indreed
31

LÖSUNG

Der folgende Code hat bei mir mit jQuery funktioniert. Es funktioniert in jedem Browser und ermöglicht das Beibehalten von Ereignissen und benutzerdefinierten Eigenschaften.

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

DEMO

Code und Demonstration finden Sie in dieser jsFiddle .

LINKS

Siehe Wie Datei - Eingabe mit JavaScript zurücksetzen für weitere Informationen.

Gyrocode.com
quelle
1
@alessadro, nein, nur Element <input type="file">mit spezifischer ID.
Gyrocode.com
Vielen Dank, klären Sie Ihre Antwort :) +1
Candlejack
1
Dies ist die sauberste und browserkompatibelste Lösung, die ich bisher gefunden habe - danke.
Pat
25

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

Es gibt nur wenige Möglichkeiten, dies zu tun, aber die unkomplizierte Methode, die in vielen Browsern gut funktioniert, besteht darin, den abgelegten Wert in nichts zu ändern. Auf diese Weise wird der hochgeladene Upload zurückgesetzt. Versuchen Sie auch, reines Javascript anstelle eines Frameworks zu verwenden. Ich habe das erstellt Code unten, einfach ausprobieren (ES6):

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

Alireza
quelle
wie man mit jquery umgeht
Anand Choudhary
1
@AnandChoudhary Dies funktioniert auch in jQuery, aber Sie können const file = document.querySelector ('. File') ersetzen. mit const file = $ ('. file'); oder mache einfach $ ('. file'). val (""); um es zu leeren
Alireza
18

Besonders für Angular

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

Funktioniert, aber wenn Sie Angular verwenden, wird angezeigt, dass "Eigenschaft 'Wert' für Typ 'HTMLElement' nicht vorhanden ist.

document.getElementById () gibt den Typ HTMLElement zurück, der keine value-Eigenschaft enthält. Also, wandle es in HTMLInputElement um

(<HTMLInputElement>document.getElementById('uploadFile')).value = "";

EXTRA :-

Wir sollten jedoch keine DOM-Manipulation (document.xyz ()) im Winkel verwenden.

Zu diesem Zweck hat Angular @VIewChild, @ViewChildren usw. bereitgestellt, die document.querySelector () bzw. document.queryselectorAll () sind.

Auch ich habe es nicht gelesen. Es ist besser, Expertenblogs zu folgen

Gehen Sie durch diesen Link1 , Link2

P Satish Patro
quelle
Ich bin froh, dass ich keinen Winkel verwenden muss!
user2677034
FIx wäre da. Nur ich habe diesen gefunden. Welches benutzt du dann?
P Satish Patro
Entschuldigung, ich war sarkastisch ... Ich benutze nur document.getElementById ('uploadFile'). Value = ""; da ich keinen eckigen benutze.
user2677034
Schön. Ich dachte das gleiche, aber benutze Angular / React / VUe. Dies sind leistungsstarke Frameworks für Routing, Komponenten-, Service- und Dom-Manipulations-Override-Implementierung
P Satish Patro
14

Ich benutze für vuejs

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

this.$refs.fileref.value = ''
Anson
quelle
2
Danke, Mann! Ich dachte, ich werde mit vuejs niemals eine Lösung finden: D, du bist verrückt nach meinem Tag!
Zsoca
1
Lief wie am Schnürchen! Vielen Dank
F KIng
8

Die zurückgesetzte 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 zum Beispiel ist $('input[type=text]')oder ein beliebiges Element des Formulars

Ereignis click , changeoder irgendein Ereignis

$('body').delegate('event', 'selector', function(){
     $('input[type=file]').val(null) ;
});
Ivan Fretes
quelle
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);

wo :

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

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

Jalaleddin Hosseini
quelle
5

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

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

Wert nach dem Senden löschen.

this.fileInput.value = "";
Sourabh Bhutani
quelle
4

Benutz einfach:

$('input[type=file]').val('');
Deepak Shinde
quelle
4

Mit Angular können Sie eine Vorlagenvariable erstellen und den Wert auf festlegen null

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

Oder Sie können eine Methode zum Zurücksetzen wie folgt 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

malbarmavi
quelle
2

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

Ducaz035
quelle
2

Sie sollten dies versuchen:

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

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

Fraz Abbas
quelle
2

Meine beste Lösung

$(".file_uplaod_input").val('');  // this is working best ):
Abdelhakim Ezzahraoui
quelle
Wie unterscheidet sich das von der ersten Antwort und den Kommentaren zu dieser Antwort?
Akin Okegbile
1

jQuery-Lösung:

    $('input').on('change',function(){
                $(this).get(0).value = '';
                $(this).get(0).type = '';
                $(this).get(0).type = 'file';
            });
Panatoni
quelle
Erwägen Sie, diese Antwort aufzufüllen, um zu erklären, wie sie funktioniert.
Bugs
@ Bugs vermuten, das spricht für sich. Wenn das on changeEreignis der Dateieingabe ausgelöst wird, wird der Wert gelöscht. Der Typ der Eingabe wird von none in file zurückgesetzt.
2
@Jordy ja ich weiß was es tut :) Ich dachte nur, dass es sich mit einem Dutzend anderer Antworten lohnen würde, es hervorzuheben. Es erschien, während ich überprüfte. Sie könnten tatsächlich Ihren Kommentar kopieren, um ihn ein bisschen mehr auszufüllen. Es lohnt sich immer zu erklären, warum der Code das OP-Problem behebt.
Bugs
1

Ich hatte das Problem mit dem Hochladen von ng2-Dateien für Angular. Wenn Sie nach einer Lösung im Winkel suchen, lesen Sie den folgenden Code

HTML:

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

};

Javascriptsoldier
quelle
1
<input type="file" id="mfile" name="mfile">
<p>Reset</p>

<script>
$(document).ready(function(){
$("p").click(function(){

            $("#mfile").val('');
            return false;

    });
});

w.Daya
quelle
Während dieser Code die Frage lösen kann, einschließlich einer Erklärung, wie und warum dies das Problem löst, würde dies wirklich dazu beitragen, die Qualität Ihres Beitrags zu verbessern, und wahrscheinlich zu mehr Up-Votes führen. Denken Sie daran, dass Sie in Zukunft die Frage für die Leser beantworten, nicht nur für die Person, die jetzt fragt. Bitte bearbeiten Sie Ihre Antwort, um Erklärungen hinzuzufügen und anzugeben, welche Einschränkungen und Annahmen gelten. Aus der Überprüfung
doppelter Piepton
0

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

Wenn Sie Boostrap, JQuery und Filestyle verwenden, um das Formular für die Eingabedatei anzuzeigen:

$("#"+idInput).filestyle('clear');
user6087223
quelle
0
var fileInput = $('#uploadCaptureInputFile');
fileInput.replaceWith(fileInput.val('').clone(true));
Kld
quelle
0

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 !!');
        }
    });

});
Arun Prasad ES
quelle
0

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>

Md. Abu Bakker Siddique
quelle