AngularJS Unable to display upload file logs [dupl

2020-05-10 09:27发布

站内问答 / 前端开发
1730 1 5

I am trying to create a file upload function using angularjs which will just accept the file and send it to the server side (Django). To ensure the file upload function is working fine, I've placed multiple console.log in multiple locations. However, none of the logs are displayed. This are my codes:

.html:

<body ng-app="myApp" ng-controller="appCtrl">
     <input type="file" id="file" name="files" accept="text/*" 
            data-url="file" class="inputfile_upload"
            ng-model="uploadedFile"/>
     <label for="file"> <span id="chooseFile"></span>Upload a file!</label>
     <button id="submitBtn" type="submit" ng-click="upload()"
             ng-model="uploadBtn">Upload</button>
</body>

directive.js:

app.directive("appDirective", function() {
    return {
       restrict: 'A',
       link: function(scope, element, attrs) {
          var model = $parse(attrs.appDirective);
          var modelSetter = model.assign;
          element.bind('change', function() {
             scope.$apply(function() {
                modelSetter(scope, element[0].files[0]);
             });
          });
       }
    };
});

controller.js:

var app = angular.module('myApp', [])
app.controller('appCtrl', function ($scope, $rootScope, $http, fileUploadService){
    $scope.$watch('uploadBtn', function (newVal, oldVal) {
        var submitBtn = document.getElementById('submitBtn');    
        $scope.upload = function() { 
            if(newVal == true){
                $scope.upload = function() { 
                   var file = $scope.uploadedFile; 
                   console.log('file is ' );
                   console.dir(file);
                   var uploadUrl = "/file";
                   fileUploadService.uploadFileToUrl(file, uploadUrl);
                   $http({
                     method:'GET'
                   })
                   .success(function(data) {
                     console.log("success");
                   })
                   .error(function(data){
                     console.log("failed");
                   })
               };
            }
        }
    )}

Service.js:

app.factory('fileUploadService', function ($rootScope, $http) {
   var service = {};
   service.uploadFileToUrl = function upload(file, uploadUrl){
        var fd = new FormData();
        fd.append('file', file);
        $http.post(uploadUrl, fd, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        })
        .success(function(){
        console.log("Files added");
        })
        .error(function(){
        console.log("Files not successfully added");
        });
    }
    return service;
});

1条回答
爷、活的狠高调
2楼-- · 2020-05-10 09:52

The ng-model directive does not work with <button> elements:

 <button id="submitBtn" type="submit" ng-click="upload()"
         ̶n̶g̶-̶m̶o̶d̶e̶l̶=̶"̶u̶p̶l̶o̶a̶d̶B̶t̶n̶"̶ >Upload</button>

Simply assign a function to $scope.upload:

var app = angular.module('myApp', [])
app.controller('appCtrl', function ($scope, $rootScope, $http, fileUploadService){
    ̶$̶s̶c̶o̶p̶e̶.̶$̶w̶a̶t̶c̶h̶(̶'̶u̶p̶l̶o̶a̶d̶B̶t̶n̶'̶,̶ ̶f̶u̶n̶c̶t̶i̶o̶n̶ ̶(̶n̶e̶w̶V̶a̶l̶,̶ ̶o̶l̶d̶V̶a̶l̶)̶ ̶{̶ 
        ̶v̶a̶r̶ ̶s̶u̶b̶m̶i̶t̶B̶t̶n̶ ̶=̶ ̶d̶o̶c̶u̶m̶e̶n̶t̶.̶g̶e̶t̶E̶l̶e̶m̶e̶n̶t̶B̶y̶I̶d̶(̶'̶s̶u̶b̶m̶i̶t̶B̶t̶n̶'̶)̶;̶
        ̶$̶s̶c̶o̶p̶e̶.̶u̶p̶l̶o̶a̶d̶ ̶=̶ ̶f̶u̶n̶c̶t̶i̶o̶n̶(̶)̶ ̶{̶
            ̶i̶f̶(̶n̶e̶w̶V̶a̶l̶ ̶=̶=̶ ̶t̶r̶u̶e̶)̶{̶
                $scope.upload = function() { 
                   var file = $scope.uploadedFile; 
                   console.log('file is ' );
                   console.dir(file);
                   //...
                };
    //...
})

The console.log statements will show upon clicking the button.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)