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);
  });

Answer 2

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

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

使用angularjs上传多个文件

2 个答案: