使用angularjs上传多个文件

Question

我想使用角度js上传多个文件,但它就像有限数量的文件,每个文件都有特定的验证,因此无法使用"多个".为每个文件使用多个控件一个..

下面是示例代码

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.filelist = ['file1','file2']

});

app.directive("fileBind", function() {
  return function( scope, elm, attrs ) {
    elm.bind("change", function( evt ) {
      scope.$apply(function() {
        scope[ attrs.fileBind ] = evt.target.files;
      });
    });
  };
});

corrposponding html是:

 <div ng-controller="MainCtrl">

      <div ng-repeat="myfile in filelist">
        <input type="file" file-bind="files" />
      </div>

      <div ng-repeat="file in files">
        <pre>{{ file | json }}</pre>
      </div>

    </div>

我也为它做了一个东西:http://plnkr.co/edit/DF2WYU

但这不起作用...如果我使用$ index或任何东西存储上传的所有文件,该指令停止工作......

任何帮助都是适当的

Answer 1

不确定问题出在哪里,但是我已经将polyfill的简单/轻角度指令放在一起,用于不支持HTML5 FormData的浏览器:

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

它与您在此处使用指令监听change事件非常相似.然后你可以调用添加的原型到$ http"uploadFile",通过ajax将该文件上传到服务器.对于IE,它会加载一个flash文件来模拟同样的事情.

这是工作演示:http://angular-file-upload.appspot.com/

<script src="angular.min.js"></script>
<script src="angular-file-upload.js"></script>

<div ng-controller="MyCtrl">
  <input type="text" ng-model="myModelObj">
  <input type="file" ng-file-select="onFileSelect($files)" >
</div>

控制器:

$http.uploadFile({
    url: 'my/upload/url',
    data: {myObj: $scope.myModelObj},
    file: $file
  }).then(function(data, status, headers, config) {
    // file is uploaded successfully
    console.log(data);
  });