如何使用angularjs将带有表单数据的多个文件上传到数据库

时间:2016-09-13 06:26:04

标签: angularjs spring-mvc ng-file-upload

这是我上传文件的代码,但是我想用spring mvc同时上传多个带表单数据的文件,请帮我用spring和angularjs来做这个怎么做

      http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">    

  <div ng-controller = "myCtrl">
     <input type = "file"  file-model = "myFile"/>
     <button ng-click = "uploadFile()">upload me</button>
  </div>

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

     myApp.directive('fileModel', ['$parse', function ($parse) {
        return {
           restrict: 'A',
           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]);
                 });
              });
           }
        };
     }]);

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

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

           .success(function(){
           })

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

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

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

           var uploadUrl = "http://localhost:8080/HBDatabase/static/image";
           fileUpload.uploadFileToUrl(file, uploadUrl);
        };
     }]);

  </script>

0 个答案:

没有答案