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

【问题标题】：How to upload multiple files(each file contains max 1 file) on clicking on submit button?单击提交按钮时如何上传多个文件（每个文件最多包含 1 个文件）？
【发布时间】：2017-11-07 02:54:42
【问题描述】：

您好，我正在使用 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>

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

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

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

我有这个功能来保存文件（取自fiddler）

$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 函数中应该写什么？我如何在这里收集所有文件数据？谢谢你。

【问题讨论】：

多部分表格。见stackoverflow.com/questions/24443246/…
谢谢。这将上传多个文件，但将在一个文件上传控件上选择这些多个文件。如果您不理解该场景，请告诉我。
如果您想一次性完成所有文件（Ajax POST），然后构建多部分（将所有文件连接到一个表单正文中）并提交。否则我不明白你的情况。
谢谢。你现在是对的。我对在一个表单正文中连接所有文件感到困惑。如何连接文件？
我已经创建了 var payload = new FormData();我怎样才能将文件数据附加到这个？任何帮助将不胜感激。

标签： javascript angularjs

【解决方案1】：

这是一个工作示例，希望对您有所帮助

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

<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>

【讨论】：

谢谢。这就是我要找的。我可以看到函数 doUpload。它接收 fileuploadurl 参数。但是在 ng-click="upload()" 我们没有发送任何数据。它将如何运作？
嗨，IamSiviu。希望你能理解。
我主要关心的是当我们点击上传所有文件时，我们应该将所有文件数据保存在数组或表单数据中。如何获得？
通过我们在链接阶段直接绑定的 onChange 事件。在文件选择时填充了 pendingList 数组。我删除了uploadUrl作为参数，你可以设置你想要的方式，我只是想演示如何通过你附加到formdata的forEach文件创建multipart
现在我明白了。但文件没有附加到 files.append('file', value);而 this.pendingFiles 这将反映在多个文件中。 Appening 没有发生。

【解决方案2】：

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

【讨论】：

一个文件控件应该一次上传一个文件。我不想要多个。最后我想发送所有数据（一次）。
为什么不把它们放在一个表单中，然后在提交表单时上传？
我试过我试过 var formdata = new FormData(); formdata.append("图片",$scope[文件名]);控制台.dir(formdata);这不会将数据附加到 formdata。但是 console.dir($scope[filename]);将显示所需的文件数据。我可以知道如何将文件数据附加到 formdata 吗？
这将帮助您使用表单数据stackoverflow.com/questions/21044798/…