Angularjs中的图片上传失败（getFileDetails不是函数）

Question

我希望你能帮我解决这个问题。我已经创建了一个与angularJs图片上传的功能，我不断收到错误

Uncaught TypeError: angular.element(...).scope(...).getFileDetails is not a functiononchange @ (index):1 

这是我的内部控制器功能 //上传图片

 $scope.addImage = function(){ 
      var f = document.getElementById('file').files.length; 
      if(f+$scope.numberOfImages > 5){ 
       $scope.addImageFail = true; 
       $scope.messageErrorAddPicture = 
        "Sorry but you selected too many images. " + 
        "All together with already added images, you can have max 5 images"; 
       $timeout(function(){$scope.addImageFail = false;}, 4000); 
      }else{ 
       // GET THE FILE INFORMATION. 
       $scope.getFileDetails = function(e){ 
        $scope.files = []; 
        $scope.$apply(function(){ 
         // STORE THE FILE OBJECT IN AN ARRAY. 
         for (var i = 0; i < e.files.length; i++) { 
          $scope.files.push(e.files[i]) 
         } 
        }); 
       }; 
       $scope.uploadFiles = function(){ 
        //FILL FormData WITH FILE DETAILS. 
        var data = new FormData(); 
        for (var i in $scope.files) { 
         data.append("uploadedFile", $scope.files[i]); 
        } 
        $http({ 
         method : 'POST', 
         url : $location.protocol() + '://' + $location.host() + '/server/api/products/addImagesToProduct', 
         headers : { 'Content-Type': 'multipart/form-data' }, 
         data : $.param({ 
          id_product : $scope.id, 
          file : data 
         }) 
        }).success(function(data){ 
         if(!data.success) { 
          console.log(data); 
          $scope.addImageFail = data.addImageFail; 
          $scope.messageErrorAddPicture = data.messageErrorAddPicture; 
          $timeout(function(){$scope.addImageFail = false;}, 4000); 
         }else{ 
          console.log(data); 
         } 
        }); 
        //objXhr.addEventListener("progress", updateProgress, false); 
       } 
       // UPDATE PROGRESS BAR. 
       function updateProgress(e) { 
        if (e.lengthComputable) { 
         document.getElementById('pro').setAttribute('value', e.loaded); 
         document.getElementById('pro').setAttribute('max', e.total); 
        } 
       } 
      } 
     } 

这是我的HTML

<form ng-submit="addImage()" enctype='multipart/form-data' novalidate> 
    <input type="hidden" ng-model="product[0].id_product" name="id" disabled="disabled" /> 
    <input type="file" id="file" name="file" multiple onchange="angular.element(this).scope().getFileDetails(this)" /> 
    <input type="submit" value="Upload" /> 
</form> 
<!--ADD A PROGRESS BAR ELEMENT.--> 
<div class="bg_light_color_1 relative r_corners progress_bar wrapper"> 
    <p><progress id="pro" value="0"></progress></p> 
    <!--<div style="width:40%" class="bg_color_green_2"></div>--> 
</div> 

所以我有两个问题：
1.我与图片上传做错了什么？如何解决我的代码，使其工作。
2.您将看到注释行//objXhr.addEventListener("progress” ...如何这个的addEventListener追加到我的$ HTTP请求，所以我将获得的图像上传状态

如果您需要任何额外的信息或代码，请让我知道，我会提供的。谢谢你在前进。

Answer 1

我已经基于@Lokesh昨天评论 解决我的问题我已经包括ng-file-upload librarie现在的代码被简化，它工作

我控制器现在

 $scope.uploadFiles = function(files, id_product){ 
      $scope.files = files; 
      if (files && files.length) { 
       Upload.upload({ 
        method : 'POST', 
        url: $location.protocol() + '://' + $location.host() + '/server/api/products/addImagesToProduct', 
        data: { 
         id_product: id_product, 
         files: files 
        } 
       }).then(function(response){ 
        console.log(response.data); 
        if(!response.data.success){ 
         $scope.addImageFail = response.data.addImageFail; 
         $scope.messageErrorAddPicture = response.data.messageErrorAddPicture; 
         $timeout(function(){$scope.addImageFail = false;}, 4000); 
        }else{ 
         $timeout(function() { 
          $scope.result = response.data; 
         }); 
        } 
       },function (response) { 
        if (response.status > 0) { 
         $scope.errorMsg = response.status + ': ' + response.data; 
        } 
       },function (evt) { 
        $scope.progress = 
         Math.min(100, parseInt(100.0 * evt.loaded/evt.total)); 
       }); 
      } 
     }; 

HTML

<h4>Upload on file select</h4> 

    <button ngf-select="uploadFiles($files, product[0].id_product)" multiple accept="image/*">Select Files</button> 
    <br> 
    <br>Files: 
    <ul> 
     <li ng-repeat="f in files" style="font:smaller"> 
      {{f.name}} 
     </li> 
    </ul> 
    <div class="bg_light_color_1 relative r_corners progress_bar wrapper" ng-show="progress >= 0"> 
     <p><progress id="pro" value="0"></progress></p> 
     <div style="width:{{progress}}%" class="bg_color_green_2"></div> 
    </div> 
    {{errorMsg}}