So löschen Sie eine Dateieingabe von Angular JS

Question

In AngularJS verwende ich den hier beschriebenen Ansatz, um Eingabe Typ = Datei zu behandeln.

• https://groups.google.com/forum/?fromgroups=#!topic/angular/-OpgmLjFR_U
• http://jsfiddle.net/marcenuc/ADukg/89/

Markup:

<div ng-controller="MyCtrl"> 
    <input type="file" onchange="angular.element(this).scope().setFile(this)"> 
    {{theFile.name}} 
</div> 

Controller:

var myApp = angular.module('myApp', []); 

myApp.controller('MyCtrl', function($scope) { 
    $scope.setFile = function(element) { 
     $scope.$apply(function($scope) { 
      $scope.theFile = element.files[0]; 
     }); 
    }; 
}); 

Wie erwähnt es ein bisschen wie ein Hack, aber es mos tally arbeitet für meine Zwecke. Was ich jedoch brauche, ist eine Möglichkeit, die Dateieingabe zu löschen, nachdem der Upload beendet wurde - dh von der Steuerung.

Ich konnte es vollständig hacken und jQuery oder etwas verwenden, um das Eingabeelement zu finden und es zu löschen, aber hoffte auf etwas eleganteres.

Answer 1

Ich würde definitiv Richtlinie für diese Art von Aufgabe verwenden.

http://plnkr.co/edit/xLM9VX

app.directive('fileSelect', function() { 
    var template = '<input type="file" name="files"/>'; 
    return function(scope, elem, attrs) { 
    var selector = $(template); 
    elem.append(selector); 
    selector.bind('change', function(event) { 
     scope.$apply(function() { 
     scope[ attrs.fileSelect ] = event.originalEvent.target.files; 
     }); 
    }); 
    scope.$watch(attrs.fileSelect, function(file) { 
     selector.val(file); 
    }); 
    }; 
}); 

Anmerkung: es jquery für Elementerstellung verwendet.

Answer 2

Nach einem erfolgreichen Upload, lösche ich die Eingabetyp Dateielemente explizit aus meinem Controller nach oben, etwa so:

angular.forEach(
    angular.element("input[type='file']"), 
    function(inputElem) { 
     angular.element(inputElem).val(null); 
    }); 

Der input[type='file'] Wähler erfordert jQuery, aber alles andere ist schlicht Angular.

Answer 3

meine Lösung ohne $ Scope zu verwenden.

Answer 4

Es könnte Ihnen helfen !!

HTML-Code Probe

<input type="file" id="fileMobile" file-model="myFile"> 
<button type="button" class="btn btn-danger" id="i-agree" ng-click="uploadFile()"> Upload </button> 

AngularJS Codebeispiel

$scope.uploadFile = function() { 
    var file = $scope.myFile; 
    mobileService.uploadBulkFile(file).then(function (resp) { 
     if (resp !== undefined) { 
      $('#fileMobile').val(''); 
     } 
    }); 
}; 

Answer 5

Sie ID verwenden können Dateifeld zurücksetzen.

<div class="col-md-8"> 
    <label for="files">Select File</label> 
    <input type="file" id="file_upload" class="form-control"> 
</div> 

Nach dem Upload löschen Sie es.

var fileElement = angular.element('#file_upload'); 
angular.element(fileElement).val(null); 

Das obige Beispiel funktioniert gut für mich. Wird auch für dich arbeiten.