클라이언트 측에서 서버로 파일을 옮깁니다.

Question

HTML 업로드 양식과이를 제어하는 ​​각도 조절기가 있습니다. 컨트롤러에서 파일을 업로드하는 방법을 알았지 만,이 파일을 서버로 이동/업로드 할 수있는 방법은 무엇입니까? 나는 멀터를 체크 아웃했는데 클라이언트 측에서 요구할 수 없기 때문에 이것이 나의 경우에는 작동 할 것이라고 생각하지 않는다.

다음

app.controller('uploadCtrl', function($scope, $location, $http){ 

    $scope.enableSubmitButton = false; 
    $scope.fileSizeError = false; 
    var selectedFiles = []; 

    //get files selected 
    $scope.getFiles = function($files){ 

    selectedFiles = $files; 

    //display upload button if there is a valid file to upload 
    if(selectedFiles.length !== 0){ 
     $scope.enableSubmitButton = true; 
    } 

    } 

    $scope.upload = function(){ 

    if($scope.enableSubmitButton){ 

     //disable to prevent clicking again 
     $scope.enableSubmitButton = false; 

     //correctly shows the file data 
     console.dir(selectedFiles); 


    //upload files to server 
    //What should I do here? 

    } 

    } 

}); 

Answer 1

은 예에게 있습니다

단계 : 여기처럼 내 컨트롤러가 현재 모습입니다 2이 fileModel라는 지시문을 확인 : 1이 앱

var myApp = angular.module('myApp', []); 

단계를 초기화합니다. 이 링크 연료 소모량을 사용하고 있으므로 change 속성을 결합 할 수있는 파일 업로드, 변경 기능은 다음 을 실행하고있는 경우이 파일 객체를 구문 분석 object.simple 파일 model scope을 설정하는 것이

myApp.directive('fileModel', ['$parse', function ($parse) { 
       return { 
        restrict: 'A', //define attribute 
        link: function(scope, element, attrs) { 
         var model = $parse(attrs.fileModel); 
         var modelSetter = model.assign; 

         element.bind('change', function(){ 
         scope.$apply(function(){ 
          modelSetter(scope, element[0].files[0]); 
         }); 
         }); 
        } 
       }; 
      }]); 

단계 : 3 확인 파일 업로드 service 그래서 4 사용 fileUpload service하고전화 : $http

myApp.service('fileUpload', ['$http', function ($http) { 
      this.uploadFileToUrl = function(file, uploadUrl){ 
       var fd = new FormData(); //FormData 
       fd.append('file', file); //file object 

       $http.post(uploadUrl, fd, { 
        transformRequest: angular.identity, 
        headers: {'Content-Type': undefined} //define req headers 
       }) 

       .success(function(){ 

       }) 

       .error(function(){ 
       }); 
      } 
     }]); 

단계를 사용하여 서버에 그 전송 파일 (210) 기능이 selectedFiles` 당신이 찾고 싶은 것을 제외한 포함 된 내용을`말을하기 어렵다

myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){  //uploadFile function 
       $scope.uploadFile = function(){ 
        var file = $scope.myFile; 

        console.log('file is '); 
        console.dir(file); 

        var uploadUrl = "/fileUpload"; 
        fileUpload.uploadFileToUrl(file, uploadUrl); 
       }; 
      }]);