使用angularjs上传多个文件

Question

我想使用 Angular 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;
      });
    });
  };
});

对应的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>

我还为它做了一个 plunker： http://plnkr.co/edit/DF2WYU

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

任何帮助都会得到帮助

Answer 1

我不确定您查看代码的意图（抱歉没有太多时间......）无论如何，单个 html 标记输入文件可以包含文件列表，请参阅 https://developer.mozilla.org/en-US/docs/Web/API/FileList

鉴于您可以尝试使用 this answer 将更多文件附加到 FormData

Answer 2

不确定问题出在哪里，但我在这里为不支持 HTML5 FormData 的浏览器编写了一个简单/轻量级的带有 polyfill 的指令：

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

这与您在此处使用监听更改事件的指令非常相似。然后你可以调用添加的原型到 $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);
  });