Как очистить входной файл от Angular JS

В AngularJS я использую описанный здесь подход для обработки типа ввода = файла.

Разметка:

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

Контроллер:

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

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

Как уже упоминалось, это немного взломать, но в основном это работает для моих целей. Однако мне нужен способ очистки ввода файла после завершения загрузки, т.е. Из контроллера.

Я мог бы полностью взломать его и использовать jQuery или что-то, чтобы найти элемент ввода и очистить его, но надеялся на что-то более элегантное.

Ответы

Ответ 1

Я бы определенно использовал директиву для такого рода задач.

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

Примечание: для создания элемента используется jquery.

Ответ 2

После успешной загрузки я четко очищу элементы типа входного типа от моего контроллера, например:

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

Селектор input[type='file'] требует jQuery, но все остальное является простым Angular.

Ответ 3

мое решение без использования $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
    };
}]);

Ответ 4

Это может помочь вам!

Пример кода HTML

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

Пример кода AngularJs

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

Ответ 5

Вы можете использовать поле ID в reset.

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

После загрузки его очистить.

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

Вышеприведенный пример полезен для меня. Будет работать и для вас.