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

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

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 = "";

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()"

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

Falls Sie Folgendes haben:

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

dann mach einfach:

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

um das Dateisteuerelement zurückzusetzen.

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

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

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.

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>

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

Ich benutze für vuejs

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

this.$refs.fileref.value = ''

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

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

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 = "";

Benutz einfach:

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

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

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.

Sie sollten dies versuchen:

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

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>

Meine beste Lösung

$(".file_uplaod_input").val('');  // this is working best ):

jQuery-Lösung:

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

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 = '';`

};

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

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

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

    });
});

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

var fileInput = $('#uploadCaptureInputFile');
fileInput.replaceWith(fileInput.val('').clone(true));

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

});