angularjs中的fileupload产生一个错误

我想使用一个简单的文件上传使用angularjs，但上传和关闭按钮不起作用。angularjs中的fileupload产生一个错误

这里是我的html：

<div> 

    <div class="modal-header"> 
     <h3 class="modal-title">File Attachment</h3> 
    </div> 

    <div class="modal-body"> 
     <input type="file" file-model="myFile" /> 
    </div> 

    <div class="modal-footer"> 
     <div class="btn-toolbar pull-right" role="toolbar"> 
      <div class="btn-group" role="group" ng-controller="FileUploadController as fileUploadCtrl"> 
       <button class="btn btn-default" ng-click="FileUploadCtrl.uploadFile()">Upload</button> 
      </div> 
      <div class="btn-group" role="group"> 
       <button type="button" class="btn btn-default" ng-click="$close()">Close</button> 
      </div> 
     </div> 
    </div> 

</div>

此外，我得到一个错误在我的工厂之前我打的浏览按钮，指出以下，但无法在网络上找到了它的解决方案，甚至尽管我看到很多关于它的问题。

[$injector:undef] Provider 'fileUpload' must return a value from $get factory method.

这里是我的工厂方法：

.factory('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() { 
        }); 
       } 
      }])

这里是我的指令：

.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]); 
         }); 
        }); 
       } 
      }; 
     }])

这里是我的js文件的功能：

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

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

      var uploadUrl = "/fileUpload"; 

      fileUpload.uploadFileToUrl(file, uploadUrl); 
     }; 
    }])

注意，我需要从此文件开始使用工厂和指令附件功能将用于多种表单。

从什么错误消息说，它看起来像我需要从工厂方法返回一个值，但不知道是什么....

是否有人可以告诉我怎么可以完成文件上传在这里，我做错了什么？

来源

2016-01-20 sagesky36

OhMy！！那是IE？你为什么不使用其他浏览器？ – robe007

使用Chrome时出现同样的确切错误。 – sagesky36

使用工厂这样

.factory('fileUpload', ['$http', function ($http) { 
     return 
     { 
      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(){ 
      }); 
     } 
     } 
    }]);

，或者如果你想厂，而不是你可以使用 '服务'

.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(){ 
      }); 
     } 
    }]);

更多的细节，你可以检查此链接：AngularJS: Service vs provider vs factory

来源

2016-01-20 20:54:13 agm92

angularjs中的fileupload产生一个错误

回答

相关问题