Wie kann ich eine HTML-Dateieingabe mit JavaScript löschen?

Ich möchte die Dateieingabe in meinem Formular löschen.

Ich weiß, wie man die Quellen auf dieselbe Methode setzt ... Aber diese Methode löscht den ausgewählten Dateipfad nicht.

Hinweis : Ich möchte vermeiden, dass die Seite neu geladen, das Formular zurückgesetzt oder ein AJAX-Aufruf ausgeführt werden muss.

Ist das möglich?

Wie wäre es, diesen Knoten zu entfernen und einen neuen mit demselben Namen zu erstellen?

Es gibt drei Möglichkeiten, die Dateieingabe mit Javascript zu löschen:

1. Setzen Sie die value-Eigenschaft auf leer oder null.

   Funktioniert für IE11 + und andere moderne Browser.

2. Erstellen Sie ein neues Dateieingabeelement und ersetzen Sie das alte.

   Der Nachteil ist, dass Sie Ereignis-Listener und expando-Eigenschaften verlieren.

3. Setzen Sie das Eigentümerformular über die Methode form.reset () zurück.

   Um zu vermeiden, dass andere Eingabeelemente im selben Eigentümerformular beeinflusst werden, können wir ein neues leeres Formular erstellen und das Dateieingabeelement an dieses neue Formular anhängen und zurücksetzen. Diese Methode funktioniert für alle Browser.

Ich habe eine Javascript-Funktion geschrieben. Demo: http://jsbin.com/muhipoye/1/

function clearInputFile(f){
    if(f.value){
        try{
            f.value = ''; //for IE11, latest Chrome/Firefox/Opera...
        }catch(err){ }
        if(f.value){ //for IE5 ~ IE10
            var form = document.createElement('form'),
                parentNode = f.parentNode, ref = f.nextSibling;
            form.appendChild(f);
            form.reset();
            parentNode.insertBefore(f,ref);
        }
    }
}

tl; dr : Für moderne Browser verwenden Sie einfach

input.value = '';

Alte Antwort:

Wie wäre es mit:

input.type = "text";
input.type = "file";

Ich muss noch verstehen, warum dies mit Webkit nicht funktioniert .

Auf jeden Fall funktioniert dies mit IE9>, Firefox und Opera.
Die Situation mit dem Webkit ist, dass ich es anscheinend nicht wieder in eine Datei ändern kann.
Bei IE8 wird eine Sicherheitsausnahme ausgelöst.

Bearbeiten: Für Webkit, Opera und Firefox funktioniert dies jedoch:

input.value = '';

(Überprüfen Sie die obige Antwort mit diesem Vorschlag)

Ich werde sehen, ob ich einen saubereren Weg finden kann, diesen Cross-Browser ohne die Notwendigkeit des GC durchzuführen.

Edit2:

try{
    inputs[i].value = '';
    if(inputs[i].value){
        inputs[i].type = "text";
        inputs[i].type = "file";
    }
}catch(e){}

Funktioniert mit den meisten Browsern. Funktioniert nicht mit IE <9, das ist alles.
Getestet auf Firefox 20, Chrome 24, Oper 12, IE7, IE8, IE9 und IE10.

Setzen Sie den Wert auf '' funktioniert nicht in allen Browsern.

Versuchen Sie stattdessen, den Wert nullso einzustellen, dass er Ihnen gefällt:

document.getElementById('your_input_id').value= null;

BEARBEITEN: Ich erhalte die sehr gültigen Sicherheitsgründe dafür, dass JS die Dateieingabe nicht festlegen darf. Es erscheint jedoch sinnvoll, einen einfachen Mechanismus zum Löschen der bereits ausgewählten Ausgabe bereitzustellen . Ich habe versucht, eine leere Zeichenfolge zu verwenden, aber es hat nicht in allen Browsern funktioniert.NULL funktioniert, die ich ausprobiert habe (Opera, Chrome, FF, IE11 + und Safari).

BEARBEITEN: Bitte beachten Sie, dass die Einstellung auf NULLin allen Browsern funktioniert, während die Einstellung auf eine leere Zeichenfolge nicht funktioniert.

Leider scheint keine der obigen Antworten alle Grundlagen abzudecken - zumindest nicht bei meinen Tests mit Vanille-Javascript.

• .value = nullscheint auf FireFox, Chome, Opera und IE11 zu funktionieren (aber nicht auf IE8 / 9/10 )

• .cloneNode(und .clone()in jQuery) in FireFox scheint das .valueOver zu kopieren , wodurch der Klon sinnlos wird.

Hier ist die Vanille-Javascript-Funktion, die ich geschrieben habe und die unter FireFox (27 und 28), Chrome (33), IE (8, 9, 10, 11), Opera (17) funktioniert. Dies sind die einzigen derzeit verfügbaren Browser zu mir zu testen.

function clearFileInput(ctrl) {
  try {
    ctrl.value = null;
  } catch(ex) { }
  if (ctrl.value) {
    ctrl.parentNode.replaceChild(ctrl.cloneNode(true), ctrl);
  }
}

Der ctrlParameter ist die Dateieingabe selbst, daher würde die Funktion als ...

clearFileInput(document.getElementById("myFileInput"));

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 = $('#your-input-id');
$el.wrap('<form>').closest('form').get(0).reset();
$el.unwrap();

DEMO

Code und Demonstration finden Sie in dieser jsFiddle .

LINKS

• <Input type = 'file' /> mit jQuery löschen

• So setzen Sie die Dateieingabe mit JavaScript zurück

Sie müssen es durch eine neue Dateieingabe ersetzen. So geht's mit jQuery:

var inputFile = $('input[type=field]');
inputFile.wrap('<div />');

und verwenden Sie diese Zeile, wenn Sie das Eingabefeld löschen müssen (z. B. bei einem Ereignis):

inputFile.parent().html( inputFile.parent().html() );

document.getElementById('your_input_id').value=''

Bearbeiten:
Dieser funktioniert nicht in IE und Oper, scheint aber für Firefox, Safari und Chrome zu funktionieren.

Ich hatte das gleiche Problem und habe mir das ausgedacht.

var file = document.querySelector('input');
var emptyFile = document.createElement('input');
emptyFile.type = 'file';

document.querySelector('button').onclick = function(){
  file.files = emptyFile.files;
}

<input type='file'>
<button>clear</button>

Das ist eigentlich ganz einfach.

document.querySelector('#input-field').value = '';

Ich habe nach einer einfachen und sauberen Möglichkeit gesucht, die Eingabe von HTML-Dateien zu löschen. Die obigen Antworten sind großartig, aber keine von ihnen beantwortet wirklich das, wonach ich suche, bis ich im Web auf einfache und elegante Weise darauf gestoßen bin:

var $input = $("#control");

$input.replaceWith($input.val('').clone(true));

Der gesamte Kredit geht an Chris Coyier .

// Referneces
var control = $("#control"),
    clearBn = $("#clear");

// Setup the clear functionality
clearBn.on("click", function(){
    control.replaceWith( control.val('').clone( true ) );
});

// Some bound handlers to preserve when cloning
control.on({
    change: function(){ console.log( "Changed" ) },
     focus: function(){ console.log(  "Focus"  ) }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" id="control">
<br><br>
<a href="#" id="clear">Clear</a>

Die obigen Antworten bieten aus folgenden Gründen etwas ungeschickte Lösungen:

1. Ich mag sie nicht zu haben , wrapdie inputersten und dann die HTML bekommen, es ist sehr aufwendig und schmutzig.

2. Cross-Browser-JS ist praktisch und es scheint, dass es in diesem Fall zu viele Unbekannte gibt, um das typeUmschalten (was wiederum etwas schmutzig ist) und das Einstellen valueauf zuverlässig zu verwenden''

Deshalb biete ich Ihnen meine jQuery-basierte Lösung an:

$('#myinput').replaceWith($('#myinput').clone())

Es macht das, was es sagt, es ersetzt die Eingabe durch einen Klon von sich. Auf dem Klon wird die Datei nicht ausgewählt.

Vorteile:

1. Einfacher und verständlicher Code
2. Kein ungeschicktes Umwickeln oder Typwechsel
3. Cross-Browser-Kompatibilität (korrigieren Sie mich, wenn ich hier falsch liege)

Ergebnis: Glücklicher Programmierer

Was mir geholfen hat, ist, dass ich versucht habe, die zuletzt ausgewählte Datei mithilfe einer Schleife abzurufen und hochzuladen, anstatt die Warteschlange zu leeren, und es hat funktioniert. Hier ist der Code.

for (int i = 0; i <= Request.Files.Count-1; i++)
{
 HttpPostedFileBase uploadfile = files[i];
 Stream fs = uploadfile.InputStream;
 BinaryReader br = new BinaryReader(fs);
 Byte[] imageBytes = br.ReadBytes((Int32)fs.Length);
}

Hoffe das könnte einigen helfen.

Ich habe die meisten Lösungen ausprobiert, aber es schien, als würde niemand funktionieren. Allerdings habe ich unten einen Spaziergang dafür gefunden.

Die Struktur des Formulars ist: form => label, inputund submit button. Nachdem wir eine Datei ausgewählt haben, wird der Dateiname von der Beschriftung manuell in JavaScript angezeigt.

Meine Strategie lautet also: zunächst das Submit button deaktiviert. Nachdem eine Datei ausgewählt wurde, wird das disabledAttribut der Schaltfläche " Senden" entfernt, sodass ich eine Datei senden kann. Nachdem ich eingereicht habe, lösche ich das label, wodurch es so aussieht, als würde ich die Datei löschen, inputaber eigentlich nicht. Dann werde ich die Schaltfläche "Senden" wieder deaktivieren, um das Senden des Formulars zu verhindern.

Wenn Sie "Senden" festlegen button disableoder nicht, kann ich verhindern, dass die Datei mehrmals gesendet wird, es sei denn, ich wähle eine andere Datei aus.

Hier sind meine zwei Cent, die Eingabedateien werden als Array gespeichert, also hier ist, wie man sie auf Null setzt

document.getElementById('selector').value = []

Dies gibt ein leeres Array zurück und funktioniert in allen Browsern

Ich habe geändert, um Text einzugeben und zurück, um mit setAttribute in eine Datei einzugeben

'<input file-model="thefilePic" style="width:95%;" type="file" name="file" id="filepicture" accept="image/jpeg" />'

'var input=document.querySelector('#filepicture');'

if(input != null)
{
    input.setAttribute("type", "text");
    input.setAttribute("type", "file");
}