图像上传失败(getFileDetails不是一个函数）在Angularjs中

我希望你能在这个案子上帮助我。我创建了一个使用 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请求中，以便我获得图像上传状态

如果您需要任何其他信息或代码，请告诉我，我会提供。提前谢谢你。