>

여러 파일을 선택하기 위해 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 ()를 호출하면 각 요청에 첨부 된 파일에 액세스 할 수 있어야합니다.


  • 답변 # 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);
            })
          }
        });
    }
    
    
    <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 ); } }

관련 자료

  • 이전 android - FFmpeg 5 개 비디오 간의 크로스 페이딩 명령 setpts = PTS-STARTPTS를 관리하는 방법은 무엇입니까?
  • 다음 objective c - 단일 크기의 동적 UILabel 글꼴 만들기