Question

您好我正在使用Angularjs和api开发文件上传模块。我关注https://jsfiddle.net/JeJenny/vtqavfhf/。我有一个列表，其中包含护照，签证等文件名等。我将此列表绑定到数组并在ng-repeat内循环。因此，根据文档的数量生成文件上传控件，如下所示。

<div class="upload-button" ng-repeat="file in files">
                <div class="upload-button-icon">
                    <img src="images/folder-small.png">
                    <div class="upload-text">{{file}}</div>
                    <input type="file" id="file1" name="file1" file-model="{{file}}"  />
                </div>
</div>

注意：我们可以在一次上传中上传一个文档。很明显，如果我在文件数组中有4个文件，那么将生成4个文件上传控件。

最后我有一个按钮，可以在点击时保存所有上述文件。

   <input type="submit" value="{{ 'NEXT' | translate }}" class="blue-button" ng-click="uploadFile(files)">

我有这个功能来保存文件（取自小提琴手）

$scope.uploadFile = function(filename){
       //Here i want to save all the files. For example if there are three documents in array files then 3 documents at a time i want to send it to server.
    };

正如您所看到的，fiddler将具有单独的功能来单独保存每个文件。我试图一次发送所有文件。

我可以在这里得到一些帮助吗？我不确定$ scope.uploadFile函数里面应该写什么？我怎样才能收集所有文件数据？谢谢。

Answer 1

这是一个有效的例子，希望有所帮助

＆＃13;

var myApp = angular.module('myApp', []);

myApp.directive('fileModel', ['fileUpload', function(fileUpload) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      element.bind("change", function(evt) {
        fileUpload.pendingFiles[attrs.fileModel] = evt.target.files[0];
      });
    }
  };
}]);

myApp.factory('fileUpload', ['$http', function($http) {

  var service = {
    uploadUrl: "https://httpbin.org/post",
    pendingFiles: [],
    doUpload: doUpload
  };

  return service;

  function doUpload() {
    var files = new FormData();
    angular.forEach(this.pendingFiles, function(value, key) {
      files.append('file', value);
    });

    return $http.post(this.uploadUrl, files, {
      transformRequest: angular.identity,
      headers: {
        'Content-Type': undefined
      }
    })
  }
}]);

myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload) {
  $scope.fileInputs = [1, 2, 3];
  $scope.upload = function(filename) {
    fileUpload.doUpload().success(function(success) {
      $scope.result = success
    });
  };
}]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp">
  <div ng-controller="myCtrl">
    <div ng-repeat="fileInput in fileInputs">
      <input type="file" file-data="{{fileInput}}" file-model="{{fileInput}}" />
    </div>
    <br />
    <button ng-click="upload()">upload all</button>
  <br />
    <pre>{{result | json}}</pre>
  </div>
</body>

＆＃13;

Answer 2

将多个属性添加到输入标记文件中 <input type="file" multiple> 这将允许多个文件选择

单击提交按钮如何上传多个文件（每个文件包含最多1个文件）？

2 个答案: