Javascript 使用AngularJS上传文件_Javascript_Angularjs_Excel

Javascript 使用AngularJS上传文件

javascript angularjs excel

Javascript 使用AngularJS上传文件,javascript,angularjs,excel,Javascript,Angularjs,Excel,我是新手。我正在尝试构建一个功能，从angular UI上传excel工作表，并将其数据传递给REST API以进一步处理它。请在下面找到我的代码 Dashboard.jsp 我试图使文件对象处于警报状态，但它给我以下错误 TypeError: Cannot read property 'files' of undefined at ChildScope.$scope.fileChanged (script.js:25) at fn (eval at compile (angu

我是新手。我正在尝试构建一个功能，从angular UI上传excel工作表，并将其数据传递给REST API以进一步处理它。请在下面找到我的代码

Dashboard.jsp 我试图使文件对象处于警报状态，但它给我以下错误

TypeError: Cannot read property 'files' of undefined
    at ChildScope.$scope.fileChanged (script.js:25)
    at fn (eval at compile (angular.js:15156), <anonymous>:4:153)
    at callback (angular.js:26744)
    at ChildScope.$eval (angular.js:17972)
    at ChildScope.$apply (angular.js:18072)
    at HTMLButtonElement.<anonymous> (angular.js:26749)
    at defaultHandlerWrapper (angular.js:3613)
    at HTMLButtonElement.eventHandler (angular.js:3601)

TypeError:无法读取未定义的属性“文件”
在ChildScope.$scope.fileChanged（script.js:25）
在fn（编译时求值（angular.js:15156），：4:153）
回调时（angular.js:26744）
在ChildScope.$eval（angular.js:17972）
在ChildScope.$apply（angular.js:18072）
在HTMLButtoneElement。（angular.js:26749）
在defaultHandlerWrapper（angular.js:3613）
在HTMLButtonElement.eventHandler（angular.js:3601）

我不懂JSP，所以我可以用HTML简单地编写代码。这可能有助于解决您的问题。我可以试着指导你解决一个问题。请复习这篇文章，可能会对你有所帮助

HTML

将指令“fileInput”放在何处？上载我并尝试使用：$scope.files=elm.target.files不作为elm值工作是未定义的。我不明白为什么“elm”的值在控制器块中是未定义的，并且链接块中的“elm”有一些值出现警报。非常感谢Dipak…这是一个很大的帮助…我做了一些更改，现在我将文件作为对象获取。

var msaApp1 = angular.module("msaApp",[]);

msaApp1.directive('fileInput',['$parse',function($parse)
    {

    return{
        restrict:'A',
        link:function(scope,elm,attrs)
        {
            alert(elm);
            elm.bind('change',function()
                    {
                        $parse(attrs.fileInput)
                        .assign(scope,elm[0].files)
                        scope.$apply()
                    })
        }

    }
    }]).controller('fileController' , ['$scope','$http', function($scope,$http)
        {
        $scope.fileChanged=function(elm)
        {
            alert(elm);
            $scope.files=elm.files
            $scope.apply();
            alert($scope.files);
        }
        }])

TypeError: Cannot read property 'files' of undefined
    at ChildScope.$scope.fileChanged (script.js:25)
    at fn (eval at compile (angular.js:15156), <anonymous>:4:153)
    at callback (angular.js:26744)
    at ChildScope.$eval (angular.js:17972)
    at ChildScope.$apply (angular.js:18072)
    at HTMLButtonElement.<anonymous> (angular.js:26749)
    at defaultHandlerWrapper (angular.js:3613)
    at HTMLButtonElement.eventHandler (angular.js:3601)

<html ng-app="fUploadApp">
    <head><title>File upload</title></head>
    <body>
        <div ng-controller = "myCtrl">
            <input type = "file" file-model = "myFile"/>
            <button ng-click = "uploadFile()">Upload File</button>
        </div>
        <script src="angular.min.js"></script>
        <script src="app.js"></script>
    </body>
</html>

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

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

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

 fUploadApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){
    $scope.uploadFile = function(){
       var file = $scope.myFile;
       var uploadUrl = "/savedata";
       fileUpload.uploadFileToUrl(file, uploadUrl);
    };
 }]);