11

我正在尝试获取角度来读取用户通过<input type="file"控件选择的文件的内容。即使 angular 没有文件上传控件的指令，也应该很容易通过调用来解决这个问题$apply：

function MyController($scope) {
  $('#myFile').on('change', function() {
    var that = this;
    $scope.$apply(function() { $scope.files = that.files });
  });
}

不幸的是，该事件从未被触发。就像选择器无法引用正确的 DOM 元素一样：即使选择器找到了该元素，文件列表也始终为空。如果我用 js 控制台四处寻找，也会发生这种情况。相反，DOM 检查器在其属性中包含文件列表。

这让我发疯，但到目前为止，我让它工作的唯一方法是使用一个分配给全局变量的内联事件处理程序。为什么 jquery 选择器返回另一个项目？是否有一些模板编译 mumbo-jumbo 会混淆选择器？

4

3 回答 3

14

这是我所做的：

http://plnkr.co/edit/JPxSCyrxosVXfZnzEIuS?p=preview

app.directive('filelistBind', function() {
  return function( scope, elm, attrs ) {
    elm.bind('change', function( evt ) {
      scope.$apply(function() {
        scope[ attrs.name ] = evt.target.files;
        console.log( scope[ attrs.name ] );
      });
    });
  };
});

模板：

<input type="file" filelist-bind name="files"/>
<p>selected files : <pre>{{ files | json }}</pre></p>

这种任务，你肯定要使用指令。但我认为您主要关心的是如何访问选定的文件对象，我的示例应该澄清这一点。

于 2013-05-16T06:47:13.467 回答
2

如果您正在寻找带有角度的文件上传，您可以使用这个插件

https://github.com/danialfarid/angular-file-upload

它基本上是一个类似于 tosh 的回答的指令，它使用 FileAPI flash polyfill 处理非 HTML5 浏览器，并具有 $http.uploadFile 函数来通过 AJAX 上传实际文件。

于 2013-09-03T18:31:15.077 回答
1

该站点使用 Angular 服务进行 HTML5 文件上传。一种简单的方法是设置一个控制器，该控制器调用服务并在异步调用完成时更新 UI。

控制器：

 myapp.controller('fileUploadCtrl', ['$scope', '$q', 'FileInputService', function ($scope, $q, FileInputService) {
            $scope.fileInputContent = "";
            $scope.onFileUpload = function (element) {
                $scope.$apply(function (scope) {
                    var file = element.files[0];
                    FileInputService.readFileAsync(file).then(function (fileInputContent) {
                        $scope.fileInputContent = fileInputContent;
                    });
                });
            };
        }]);

服务：

myapp.service('FileInputService', function ($q) {

    this.readFileAsync = function (file) {
        var deferred = $q.defer(),
        fileReader = new FileReader(),
        fileReader.readAsText(file);

        fileReader.onload = function (e) {
            deferred.resolve(e.target.result);
        };
        return deferred.promise;
    };
});

模板：

Choose File <input type="file" onchange="angular.element(this).scope().onFileUpload(this)">
<br />
{{fileInputContent}}

参考：您可以在此站点上找到完整的源代码和参考。

于 2015-05-17T06:51:47.140 回答