使用 AngularJS 上传 HTML5 文件

Question

我正在尝试获取 Angular 来读取用户通过 <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 angular 会混淆选择器？

Answer 1

这是我的做法:

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>

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