So löschen Sie die Dateieingabe

Unten ist ein Teil des jquery-Codes, den ich habe, der die Dateieingabe und eine 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);

Nun, 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 sich in der Dateieingabe befindet. Wie codiere ich es, damit es die Dateieingabe tatsächlich löscht, 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;

für React-Benutzer

e.target.value = ""

Aber wenn das Dateieingabeelement von einem anderen Element ausgelöst wird (mit einer htmlFor -Attribut) – das bedeutet, dass Sie das Ereignis nicht haben

Sie könnten also eine Referenz verwenden:

zu Beginn der Funktion:

const inputRef = React.useRef();

am Eingabeelement

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

und dann auf eine onClick-Funktion (zum Beispiel) u schreiben können

inputRef.current.value = "" 

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

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

    var input = $("#fileInput");

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

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

Holen Sie sich die Eingabe-ID und setzen Sie val leer wie unten: Hinweis: Setzen Sie kein Leerzeichen zwischen val leere doppelte Anführungszeichen val(” “).

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

Indem man es einstellt $("ID").val(null)hat bei mir funktioniert

Eine andere Lösung, wenn Sie sicher sein möchten, dass dies browserübergreifend möglich ist, besteht darin, das Tag zu entfernen () und dann append () 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"]"));