2013-02-26 25 views
21

W AngularJS używam opisanego tutaj podejścia do obsługi typu wejściowego = plik.Jak wyczyścić dane wejściowe z Angular JS

Markup:

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

Kontroler:

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

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

Jak wspomniano jest to bit hack, ale MOS tly działa dla moich celów. Potrzebuję jednak sposobu, aby wyczyścić dane wejściowe z pliku po zakończeniu przesyłania - tj. Od kontrolera.

Mogę całkowicie zhakować i użyć jQuery lub czegoś, aby znaleźć element wejściowy i wyczyścić go, ale miał nadzieję na coś bardziej eleganckiego.

Odpowiedz

11

Zdecydowanie użyłbym dyrektywy dla tego rodzaju zadania.

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); 
    }); 
    }; 
}); 

uwaga: to jest przy użyciu jQuery do tworzenia elementów.

+0

Nice. Jedyny problem, jaki zauważyłem, to to, że po wybraniu pliku wystąpił błąd w dzienniku konsoli dotyczący nieprawidłowego elementu HTML w funkcji. $ Watch. (Działa w Chrome) –

+2

Obejście polega na zmianie "selector.val (plik);" do "if (file == null) selektor.val (plik);" –

32

Po udanym przesłaniu, ja rozjaśnić elementy typ pliku wejściowego wyraźnie od mojego kontrolera, tak:

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

Selektor input[type='file'] wymaga jQuery, ale wszystko inne jest zwykły kątowe.

+13

Naprawdę nie powinieneś wykonywać manipulacji DOM w kontrolerze. Po to są dyrektywy. – Soviut

+0

To nie działa dla mnie. Jeśli spróbuję ponownie wybrać ten sam plik, to onchange nie zostanie uruchomiony. Jakieś pomysły? – tomasmcguinness

+0

To działa dobrze dla mnie.Z jakiegoś powodu nie mogłem zaakceptować przyjętej dyrektywy (może moja wina, ponieważ mam więcej rzeczy w tagu wejściowym). – newman

5

moje rozwiązanie bez użycia $ scope.

app.directive('fileChange',['UploadService',function (UploadService) { 
    var linker = function (element, attrs) { 
     element.bind('change', function (event) { 
      var files = event.target.files; 
      UploadService.upload({'name':attrs['name'],'file':files[0]}); 
      element.val(null); // clear input 
     }); 
    }; 
    return { 
     restrict: 'A', 
     link: linker 
    }; 
}]); 
+1

to powinna być najlepsza odpowiedź. krótki i elegancki. Zastanawiam się, dlaczego użyć selektora w dyrektywie, gdy mamy linker. – Hao

5

To może pomóc!

HTML kod przykładowy kod

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

angularjs próbka

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

To zadziałało dla mnie – Jamsheer

0

Można użyć identyfikatora zresetować pole pliku.

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

Po przesłaniu wyczyść.

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

Powyższy przykład działa dobrze dla mnie. Będzie działać również dla ciebie.

Powiązane problemy