webentwicklung-frage-antwort-db.com.de

Löschen eines HTML-Datei-Upload-Felds über JavaScript

Ich möchte ein Datei-Upload-Feld zurücksetzen, wenn der Benutzer eine andere Option auswählt.

Ist das über JavaScript möglich? Ich vermute, dass das Datei-Upload-Element unterschiedlich behandelt wird, da es mit dem Dateisystem des Benutzers interagiert und möglicherweise unveränderlich ist.

Grundsätzlich möchte ich etwas (Pseudo-Code):

// Choose selecting existing file
$('#select-file').bind('focus', function() {
  // Clear any files currently selected in #upload-file
  $('#upload-file').val(''); 
}) ;

// Choose uploading new one - this works ok
$('#upload-file').bind('focus', function() {
  // Clear any files currently selected in #select-file
  $('#select-file').val(''); 
}) ;
55
Chris Burgess

Sie können den Eingabewert in den meisten Browsern nicht festlegen. Sie können jedoch ein neues Element erstellen, die Attribute aus dem alten Element kopieren und die beiden austauschen.

Gegeben ein Formular wie:

<form> 
    <input id="fileInput" name="fileInput" type="file" /> 
</form>

Der gerade DOM Weg:

function clearFileInput(id) 
{ 
    var oldInput = document.getElementById(id); 

    var newInput = document.createElement("input"); 

    newInput.type = "file"; 
    newInput.id = oldInput.id; 
    newInput.name = oldInput.name; 
    newInput.className = oldInput.className; 
    newInput.style.cssText = oldInput.style.cssText; 
    // TODO: copy any other relevant attributes 

    oldInput.parentNode.replaceChild(newInput, oldInput); 
}

clearFileInput("fileInput");

Einfacher DOM-Weg. Dies funktioniert möglicherweise nicht in älteren Browsern, die keine Dateieingaben mögen:

oldInput.parentNode.replaceChild(oldInput.cloneNode(), oldInput);

Der jQuery-Weg:

$("#fileInput").replaceWith($("#fileInput").val('').clone(true));

// .val('') required for FF compatibility as per @nmit026

Zurücksetzen des gesamten Formulars über jQuery: https://stackoverflow.com/a/13351234/1091947

75
Chris Hynes

Im Jahr 2014 unterstützt das Eingabeelement mit der ID einfach die Funktion val('').

Für die Eingabe -

<input type="file" multiple="true" id="File1" name="choose-file" />

Dieses js löscht das Eingabeelement -

$("#File1").val('');
46

Ja, das Upload-Element ist in verschiedenen Browsern vor direkter Manipulation geschützt. Sie können das Element jedoch aus der DOM-Baumstruktur löschen und dann über JavaScript ein neues Element an seiner Stelle einfügen. Das würde Ihnen dasselbe Ergebnis bringen.

Etwas im Sinne von:

$('#container-element').html('<input id="upload-file" type="file"/>');
8
Udo

Der Code, den ich endete, lautete:

clearReviewFileSel: function() {
  var oldInput = document.getElementById('edit-file-upload-review-pdf') ;
  var newInput = document.createElement('input');
  newInput.id    = oldInput.id ;
  newInput.type  = oldInput.type ;
  newInput.name  = oldInput.name ;
  newInput.size  = oldInput.size ;
  newInput.class  = oldInput.class ;
  oldInput.parentNode.replaceChild(newInput, oldInput); 
}

Vielen Dank an alle für die Vorschläge und Hinweise!

5
Chris Burgess

Sie erhalten keine Fokusereignisse, daher müssen Sie einen Trick wie diesen verwenden: Sie können dies nur tun, indem Sie das gesamte Formular löschen

<script type="text/javascript">
    $(function() {
        $("#wrapper").bind("mouseover", function() {
            $("form").get(0).reset();
        });
    });
</script>

<form>
<div id="wrapper">
    <input type=file value="" />
</div>
</form>
4
Chad Grant

mag es wirklich einfach Dinge so zu halten :)

$('input[type=file]').wrap('<form></form>').parent().trigger('reset').children().unwrap('<form></form>');
4
dmi3y

Einfache Lösung:

document.getElementById("upload-files").value = "";
4
Oleg

Diese jQuery funktionierte für mich in IE11, Chrome 53 und Firefox 49:

cloned = $("#fileInput").clone(true);
cloned.val("");
$("#fileInput").replaceWith(cloned);
3
Chanaka

Kürzere version, die für mich perfekt funktioniert, ist wie folgt:

document.querySelector('#fileUpload').value = "";
3
frank waalkens

versuchen Sie dies seine Arbeit gut 

document.getElementById('fileUpload').parentNode.innerHTML = document.getElementById('fileUpload').parentNode.innerHTML;
2
Rissa

Wenn Sie folgendes haben:

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

dann mach einfach:

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

zurücksetzen oder Löschen der zuletzt ausgewählten Datei.

2
Muhammad Awais

Um Kompatibilität zu gewährleisten, wenn ajax nicht verfügbar ist, legen Sie .val ('') fest, oder es wird die letzte in der Eingabe noch vorhandene ajax-Datei erneut gesendet. Folgendes sollte die Eingabe ordnungsgemäß löschen, während die .on () -Ereignisse beibehalten werden:

var input = $("input[type='file']");
input.html(input.html()).val('');
2
aberdat

Ich weiß, dass FormData api für ältere Browser und dergleichen nicht so freundlich ist, aber in vielen Fällen verwenden Sie es sowieso (und hoffentlich Testing for support ), so dass dies gut funktioniert!

function clearFile(form) {
  // make a copy of your form
  var formData = new FormData(form);
  // reset the form temporarily, your copy is safe!
  form.reset();
  for (var pair of formData.entries()) {
    // if it's not the file, 
    if (pair[0] != "uploadNameAttributeFromForm") {
      // refill form value
      form[pair[0]].value = pair[1];
    }
    
  }
  // make new copy for AJAX submission if you into that...
  formData = new FormData(form);
}

1

Versuchen Sie diesen Code ...

$("input[type=file]").wrap("<div id='fileWrapper'/>");
$("#fileWrapper").append("<div id='duplicateFile'   style='display:none'>"+$("#fileWrapper").html()+"   </div>");
$("#fileWrapper").html($("#duplicateFile").html());
1
Niraj

jQuery-getestete Methode funktioniert gut in FF und Chrome:

$(function(){
    $.clearUploadField = function(idsel){
        $('#your-id input[name="'+idsel+'"]').val("") 
    }
});
1
crisupisu emil

Ich hatte das Problem mit dem ng2-Datei-Upload für Angle. Wenn Sie nach einer Lösung für angular per ng2-Datei-Upload suchen, lesen Sie den folgenden Code

HTML:

<input type="file" name="myfile"# activeFrameinputFileng2FileSelect [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 = '';};