angularjs и spring mvc - загружать несколько файлов по одному запросу

Question

Я хочу реализовать загрузку файлов в своем веб-приложении, я использую angular.js на стороне клиента и spring mvc на стороне сервера.

Мне удалось получить загрузку одного файла и работу с несколькими файлами, используя https://github.com/danialfarid/angular-file-upload. Дело в том, когда я загрузить несколько файлов каждый из них приходят ко мне, как отдельный запрос (что очевидно событие после прочтения примера коды):

//inject angular file upload directives and service. 
angular.module('myApp', ['angularFileUpload']); 

var MyCtrl = [ '$scope', '$upload', function($scope, $upload) { 
    $scope.onFileSelect = function($files) { 
    //$files: an array of files selected, each file has name, size, and type. 
    for (var i = 0; i < $files.length; i++) { 
     var $file = $files[i]; 
     $scope.upload = $upload.upload({ 
     url: 'server/upload/url', //upload.php script, node.js route, or servlet url 
     // method: POST or PUT, 
     // headers: {'headerKey': 'headerValue'}, withCredential: true, 
     data: {myObj: $scope.myModelObj}, 
     file: $file, 
     //(optional) set 'Content-Desposition' formData name for file 
     //fileFormDataName: myFile, 
     progress: function(evt) { 
      console.log('percent: ' + parseInt(100.0 * evt.loaded/evt.total)); 
     } 
     }).success(function(data, status, headers, config) { 
     // file is uploaded successfully 
     console.log(data); 
     }) 
     //.error(...).then(...); 
    } 
    } 
}]; 

Существует итерация по всем файлам.

Теперь мне интересно, можно ли как-то загрузить несколько файлов как один, один запрос.

Answer 1

на пружинной стороне контроллера создать

@RequestMapping(value = "/upload", method = RequestMethod.POST) 
    public String save(@ModelAttribute("filesForm") FileUploadForm filesForm) { 
       List<MultipartFile> files = filesForm.getFiles(); 
       //do something 

     } 


public class FileUploadForm 
    { 
    private List<MultipartFile> files; 

    // geters and setters ... 

    } 

на службу клиентской стороне загрузки

return { 
      send: function(files) { 
       var data = new FormData(), 
      xhr = new XMLHttpRequest(); 
       xhr.onloadstart = function() { 
        console.log('Factory: upload started: ', file.name); 
        $rootScope.$emit('upload:loadstart', xhr); 
       }; 

       xhr.onerror = function(e) { 
        $rootScope.$emit('upload:error', e); 
       }; 
       xhr.onreadystatechange = function(e) 
       { 
        if (xhr.readyState === 4 && xhr.status === 201) 
        { 
         $rootScope.$emit('upload:succes',e, xhr, file.name ,file.type); 

        } 
       }; 

     angular.forEach(files, function(f) { 
     data.append('files', f, f.name); 
      }); 

       xhr.open('POST', '../upload'); 
       xhr.send(data); 


      } 
     };