29

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

如前所述，这有点像 hack，但它主要适用于我的目的。然而，我需要的是一种在上传完成后清除文件输入的方法 - 即：从控制器。

我可以完全破解它并使用 jQuery 或其他东西来查找输入元素并清除它，但希望有一些更优雅的东西。

4

6 回答 6

37

成功上传后，我从控制器中明确清除输入类型文件元素，如下所示：

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

选择input[type='file']器需要 jQuery，但其他一切都是普通的 Angular。

于 2013-06-18T20:17:16.583 回答
11

我肯定会为这类任务使用指令。

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

于 2013-02-26T01:56:02.090 回答
10

我的解决方案不使用 $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
    };
}]);
于 2014-11-25T22:20:24.577 回答
6

它可能会帮助你！

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('');
        }
    });
};
于 2015-01-28T06:02:19.050 回答
3

您可以使用 ID 来重置文件字段。

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

上面的例子对我有用。也会为你工作。

于 2017-11-20T05:37:09.580 回答
2

就我而言，我会在文件上传成功时广播事件。所以我的指令监视广播，并清除选择。

app.directive("fileInput", function( APP_EVENTS ){
    return{
        require: "ngModel",
        link: function postLink( scope, elem, attrs, ngModel ){

            elem.on("change", function( e ){
                var files=elem[0].files;
                ngModel.$setViewValue( files );
            });

            scope.$on( APP_EVENTS.FILE_UPLOAD_SUCCESS, function( event ){
                elem.val( null );
            });
        }
    }
});

它是这样使用的：

<input type="file" name="myFieldName" ng-model="myModel" file-input/>
于 2018-04-11T19:35:55.737 回答