如何在angularjs中发送多个文件以及表单数据 [英] How to send Multiple FIles along with the form data in angularjs

问题描述

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

REST 服务代码片段

@POST@Path("/手册")@Produces(MediaType.APPLICATION_JSON)公共布尔插入结果(testVO testResult){for(Object o:testVO.getFiles()){//文件访问代码在这里}}

testVO.Java 类

private String fName;私人字符串 lName;私有对象[]文件；... getter 和 setter 方法在这里

JsFiddle HTML 表单

示例

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

$scope.insertResults= function(tc){变量结果 = {};result.lName= tc.lName;result.fName= tc.fName;result.files=$scope.files;//这也有效，但我无法访问文件内容Service.ManualResult.insertResults({},result).$promise.then(函数(数据){//成功代码放在这里},函数(错误){//错误}};

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

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

解决方案

使用AngularJS上传多个文件:服务器请求使用 JSON 文本和多部分文件数据.

<小时>

客户端脚本及其fiddle.

window.onload = function() {var app = angular.module("myapp", []);app.controller("uploadcontroller", function uploadcontrollerFun($scope, $http) {$scope.files = [];$scope.getFileDetails = 函数(e){$scope.$apply(function() {for (var i = 0; i < e.files.length; i++) {var isFileAvailable = false;console.log("文件名" + e.files[i].name);for (var j = 0; j <$scope.files.length; j++) {if ($scope.files[j].name === e.files[i].name) {isFileAvailable = true;休息;}}如果(！isFileAvailable){$scope.files.push(e.files[i]);} 别的 {alert("文件已经可用::" + 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');控制台日志(数据"，数据)；var targetRequestPath =//'./UploadScenarioFiles';//控制器地址'http://localhost:8080/PerformanceUI/UploadScenarioFiles';$http({方法:'POST'，网址:目标请求路径，标题:{'内容类型':未定义},数据:数据}).then(函数(响应){console.log('响应数据:', response.data);回调(响应数据)；})}});}

<头><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><身体><div class="form-group ng-scope" ng-app="myapp" ng-controller="uploadcontroller"><label class="control-label col-sm-3">导入文件<span class="error">*</span><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.值=空；"><br><br><button class="btn btn-success" ng-click="submitdata()">提交

</html>

<小时><块引用>

Spring 控制器到 使用 multipart 和 json 文本.

@RequestMapping(value = "/UploadScenarioFiles", method = RequestMethod.POST)public void UploadscenarioFiles(HttpServletRequest request, HttpServletResponse response) {字符串参数1；if (request != null) {//JSON 文本param1 = request.getParameter("key1");}MultipartHttpServletRequest multipart = (MultipartHttpServletRequest) 请求；迭代器<字符串>文件名 = multipart.getFileNames();while (fileNames.hasNext()) {//从多部分请求中获取文件列表.MultipartFile fileContent = multipart.getFile(fileNames.next());//将文件保存到本地(或)任何存储服务器.File file = new File("E:\\AA\\test\\"+fileContent.getOriginalFilename());fileContent.transferTo( 文件 );}}

我们可以在spring配置文件中设置文件大小限制链接

 <beans:property name="maxUploadSize" value="100000"/></beans:bean>

I am using ng-file-upload to select multiple files.But my requirement is that i want to attach those selected files as a file list into my Js object and send this object to server through REST.So far my data inserting part is working fine with out file list.

REST Service Code Snippet

@POST
@Path("/manual")
@Produces(MediaType.APPLICATION_JSON)
public boolean insertResults(testVO testResult) {

    for(Object o:testVO.getFiles()){

       //File access code goes here    
    }
}

testVO.Java class

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

JsFiddle HTML form

Sample

Angular Js code snippet for insert form data

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

my requirement is that how can i send list of files along with the form data and access each uploaded files details in server side.

Note: when i call testVO.getFiles() from server side i should be able to access files attached to each request.

解决方案

Multiple File Upload using AngularJS: Server requesting with JSON text and multipart file data.

---

Client Side Script and its 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>

---

Spring Controller to 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 );

    }
}

We can set File size limit in the spring configurationFile link

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

</beans:bean>

这篇关于如何在angularjs中发送多个文件以及表单数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！