8

Ich benutze input type="file" für meine Upload-Steuerung mit eckigen js. Jedes Mal, wenn ich auf Durchsuchen klicke, möchte ich die zuvor ausgewählte Datei nicht sehen. Standardmäßig scheint dies beibehalten zu werden. Kann es durch das Schreiben einer Richtlinie erreicht werden? Kann es bei jedem Klick auf Browse ausgelöst werden?Angular js Eingabedatendatei - Lösche zuvor ausgewählte Datei

Ich benutze eine Bootstrap-Implementierung, um die Standard-Schaltfläche zum Durchsuchen mit etwas besser zu ersetzen.

<span class="useBootstrap btn btn-default btn-file"> 
       Browse <input type="file" /> 
      </span> 
+0

sehen, ob das hilft http://stackoverflow.com/questions/15079779/how-to-clear-a-file-input-from- angular-js – user804401

Antwort

28

Dies war der einfachste Weg, ohne eine Richtlinie oder komplexen Code zu verwenden.

Browse <input type="file" ng-click="clear()" 

Und in Ihrem Controller

$scope.clear = function() { 
    angular.element("input[type='file']").val(null); 
}; 
+3

Ja, das ist in der Tat ein einfacher Weg .... Aber es ist nicht der richtige Weg. Ich habe mir die Mühe gemacht, den ganzen Code noch einmal in Form von Direktiven und allem anderen neu zu schreiben, weshalb ich diesen Ansatz nicht empfehlen kann. –

+1

Dies beschwerte sich, dass es jqLite für Selektoren nicht verwenden kann. Aber das hat gut funktioniert: var myEl = angular.element (document.querySelector ('# some-id')); – Eddy

+0

Wenn Sie eine separate Schaltfläche "Löschen" oder "Abbrechen" möchten, fügen Sie dem Element eine ID = 'hinzu. Z.B. 'id =" fileSelector_1 "und dann' angular.element (document.querySelector ('# fileSelector_1')). val (null); 'Das funktioniert für mich. Ich benutze es um sowohl die 'Speichern' als auch die' Cancel' Tasten zu löschen, – Mawg

0
here is alternate way to clear input file type. 
HTML ->> 
`<span class="useBootstrap btn btn-default btn-file"> 
    Browse <input type="file" ng-if="clearBtn" /> 
</span>` 

Js ->> 

`//initial loading 
$scope.clearBtn = true; 
// after submit/on reset function 
$scope.submitform = function(){ 
//submit logic goes here; 
//onsuccess function 
$scope.clearBtn = false; 
    $timeout(function(){ 
    $scope.clearBtn = true; 
    }); 
}`