如何在angularjs中发送多个FIles以及表单数据

我正在使用ng-file-upload来选择多个文件。但我的要求是我想将这些选定的文件作为文件列表附加到我的Js对象中，并通过REST将此对象发送到服务器。到目前为止，我的数据插入部分正在工作没有文件列表。

REST服务代码片段

@POST @Path("/manual") @Produces(MediaType.APPLICATION_JSON) public boolean insertResults(testVO testResult) { for(Object o:testVO.getFiles()){ //File access code goes here } } 

testVO.Java类

 private String fName; private String lName; private Object[] files; ... getter and setter methods goes here 

JsFiddle HTML表单

样品

用于插入表单数据的Angular Js代码段

 $scope.insertResults= function(tc){ var result = {}; result.lName= tc.lName; result.fName= tc.fName; result.files=$scope.files; //This also works but i can not access file content Service.ManualResult.insertResults({},result) .$promise.then(function(data){ //succes code goes here },function(error) { //error } }; 

我的要求是我如何发送文件列表以及表单数据并访问服务器端的每个上传文件详细信息。

注意：当我从服务器端调用testVO.getFiles（）时，我应该能够访问附加到每个请求的文件。

Answer 1

Multiple File Upload using AngularJS ：服务器请求JSON文本和多部分文件数据。

---

客户端脚本及其小提琴 。

 window.onload = function() { var app = angular.module("myapp", []); app.controller("uploadcontroller", function uploadcontrollerFun($scope, $http) { $scope.files = []; $scope.getFileDetails = function(e) { $scope.$apply(function() { for (var i = 0; i < e.files.length; i++) { var isFileAvailable = false; console.log("File Name " + e.files[i].name); for (var j = 0; j < $scope.files.length; j++) { if ($scope.files[j].name === e.files[i].name) { isFileAvailable = true; break; } } if (!isFileAvailable) { $scope.files.push(e.files[i]); } else { alert("file is already available ::" + e.files[i].name) } } }); } $scope.submitdata = function() { var data = new FormData(); for (var i in $scope.files) { data.append("uploadFile[" + i + "]", $scope.files[i]); } data.append("key1", 'email'); console.log("data",data); var targetRequestPath = //'./UploadScenarioFiles'; // Controller URL 'http://localhost:8080/PerformanceUI/UploadScenarioFiles'; $http({ method: 'POST', url: targetRequestPath, headers: { 'Content-Type': undefined }, data: data }).then(function(response) { console.log('Response Data : ', response.data); callback(response.data); }) } }); } 

        
  Import File *  
    

  submit