使用AngularJS上传HTML5文件

Question

我正试图获取角度来读取用户通过<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>

这种任务,你肯定想利用指令.但我认为你主要关心的是如何访问所选的文件对象,我的例子应该澄清一下.