angularjs – 如何清除Angular JS中的文件输入

发布时间：2020-12-17 08:12:44 所属栏目：安全来源：网络整理

导读：在AngularJS中，我使用这里描述的方法来处理输入type = file。 https://groups.google.com/forum/?fromgroups=#!topic/angular/-OpgmLjFR_U http://jsfiddle.net/marcenuc/ADukg/89/ 标记： div ng-controller="MyCtrl" input type="file" onchange="angular

在AngularJS中，我使用这里描述的方法来处理输入type = file。

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

标记：

<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或某些东西来找到输入元素并清除它，但希望有一些更加优雅的东西。

我一定会为这种任务使用指令。

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来创建元素。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!