如何發送多個文件以及angularjs中的表單數據

我使用ng-file-upload來選擇多個文件。但我的要求是，我想將這些選定文件作爲文件列表附加到我的Js對象中，並將此對象發送到服務器通過REST.So迄今爲止我的數據插入部分工作正常與出文件列表。如何發送多個文件以及angularjs中的表單數據

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

Sample

用於插入表單數據

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

我的要求角的js代碼片段是如何與表單數據一起發送的文件列表，並訪問每個上傳的文件細節服務器端。

注意：當我從服務器端調用testVO.getFiles（）時，我應該能夠訪問附加到每個請求的文件。

來源

2016-01-25 gihan

我可以張貼node.js的後端的答案嗎？我已經使用ng-file-upload模塊一次性上傳多個圖像以及其他表單數據。 –

@Gandalf the White請發佈它也許我可以得到一些想法看你的code.thanks – gihan

你試過'Upload.upload（{url：'...'，data：{lName：tc.lName，... ，文件：$ scope.files}}）'？ – danial

Multiple File Upload using AngularJS：服務器請求使用JSON文本和多部分文件數據。

客戶端腳本及其fiddle。

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

<html> 
 
<head> 
 
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    
 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script> 
 
</head> 
 
<body> 
 
    <div class="form-group ng-scope" ng-app="myapp" ng-controller="uploadcontroller"> 
 
    <label class="control-label col-sm-3"> Import File 
 
     <span class="error">*</span> 
 
    </label> 
 
    <div class="col-lg-6 col-sm-6 col-12"> 
 
     <label class="btn btn-primary"> 
 
     <input type="file" id="f" accept=".txt,.csv,.jmx " multiple="" onchange="angular.element(this).scope().getFileDetails(this);this.value=null;"> 
 
     </label> 
 
     <br><br> 
 
     <button class="btn btn-success" ng-click="submitdata()"> submit </button> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

春控制器來consume multipart and json text.

@RequestMapping(value = "/UploadScenarioFiles", method = RequestMethod.POST) 
public void UploadscenarioFiles(HttpServletRequest request, HttpServletResponse response) { 
    String param1; 
    if (request != null) { // JSON Text 
     param1 = request.getParameter("key1"); 
    } 
    MultipartHttpServletRequest multipart = (MultipartHttpServletRequest) request; 
    Iterator<String> fileNames = multipart.getFileNames(); 
    while (fileNames.hasNext()) { // Get List of files from Multipart Request. 

     MultipartFile fileContent = multipart.getFile(fileNames.next()); 

     // Save files to Local (or) any Storage server. 
     File file = new File("E:\\AA\\test\\"+fileContent.getOriginalFilename()); 
     fileContent.transferTo(file); 

    } 
}

我們所用的彈簧設置文件大小限制的ConfigurationFile link

 <!-- setting maximum upload size --> 
    <beans:property name="maxUploadSize" value="100000" /> 

</beans:bean>

來源

2017-10-12 11:40:47 Raju

如何發送多個文件以及angularjs中的表單數據

回答

相關問題