So löschen Sie die Dateieingabe

Unten ist ein Teil des JQuery-Codes, der die Dateieingabe und die Schaltfläche "Datei löschen" anzeigt.

var $imagefile = $('<input />').attr({
    type: 'file',
    name: 'imageFile',
    class: 'imageFile'
});

$image.append($imagefile);

var $imageclear = $('<input />').attr({
    type: 'button',
    name: 'imageClear',
    class: 'imageClear',
    value: 'Clear File'
});

$image.append($imageclear);

Der Grund, warum ich die Schaltfläche "Datei löschen" habe, ist, dass wenn Sie auf die Schaltfläche klicken, alles gelöscht wird, was in der Dateieingabe enthalten ist. Wie codiere ich es so, dass die Dateieingabe tatsächlich gelöscht wird, wenn ich auf die Schaltfläche "Datei löschen" klicke?

Das sollte funktionieren:

$imageClear.on('click', function() { 
    $imageFile.val(''); 
});

Löschen Sie die Dateieingabe mit jQuery

$("#fileInputId").val(null);

Löschen Sie die Dateieingabe mit JavaScript

document.getElementById("fileInputId").value = null;

Dies ist die Methode, die ich auch gerne verwende, aber ich glaube, Sie müssen den Parameter bool true zur Klonmethode hinzufügen, damit alle Ereignisse mit dem neuen Objekt verknüpft bleiben und Sie den Inhalt löschen müssen.

    var input = $("#fileInput");

    function clearInput() {
        input = input.val('').clone(true);
    };

https://api.jquery.com/clone/

Durch Einstellung $("ID").val(null)arbeitete für mich

für React-Benutzer

e.target.value = ""

Wenn das Dateieingabeelement jedoch von einem anderen Element (mit einem htmlForAttribut) ausgelöst wird, bedeutet dies, dass Sie das Ereignis nicht haben

Sie könnten also eine Referenz verwenden:

zu Beginn der Funktion:

const inputRef = React.useRef();

auf Eingabeelement

<input type="file" ref={inputRef} />

und dann auf einer onClick-Funktion (zum Beispiel) können Sie schreiben

inputRef.current.value = "" 

• in Reaktionsklassen - gleiche Idee, aber Unterschied im Konstruktor: this.inputRef = React.createRef()

Eine andere Lösung, wenn Sie sicher sein möchten, dass dies browserübergreifend ist, besteht darin, das Tag zu entfernen () und dann anzufügen () oder voranzustellen () oder auf andere Weise eine neue Instanz des Eingabe-Tags mit denselben Attributen erneut hinzuzufügen .

<form method="POST" enctype="multipart/form-data">
<label for="fileinput">
 <input type="file" name="fileinput" id="fileinput" />
</label>
</form>

$("#fileinput").remove();
$("<input>")
  .attr({
    type: 'file',
    id: 'fileinput',
    name: 'fileinput'
    })
  .appendTo($("label[for='fileinput']"));

Das funktioniert zu

 $("#yourINPUTfile").val("");

Ich habe so etwas gemacht und es funktioniert für mich

$('#fileInput').val(null); 

In meinem Fall haben andere Lösungen nicht so funktioniert:

$('.bootstrap-filestyle :input').val('');

Wenn Sie jedoch mehr als eine Dateieingabe auf einer Seite haben, wird der Text auf allen Dateien zurückgesetzt.

Geben Sie die Eingabe-ID ein und setzen Sie val wie folgt leer: Hinweis: Setzen Sie kein Leerzeichen zwischen val leere doppelte Anführungszeichen val ("").

 $('#imageFileId').val("")

Dieser Code funktioniert für alle Browser und alle Eingaben.

$('#your_target_input').attr('value', '');