Javascript 跳过上传按钮_Javascript_Angularjs_Forms_File Upload_Angularjs Directive

Javascript 跳过上传按钮

javascript angularjs forms file-upload

Javascript 跳过上传按钮,javascript,angularjs,forms,file-upload,angularjs-directive,Javascript,Angularjs,Forms,File Upload,Angularjs Directive,我有一个meanstack应用程序。我想实现一个按钮，用户可以通过它上传缩略图。我遵循了，这是有效的但是，我想跳过上传按钮：用户点击选择文件按钮，选择一个本地文件，然后我想文件自动上传，而无需点击上传按钮。使用指令控制输入，我不知道如何修改： <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular

我有一个

meanstack

应用程序。我想实现一个按钮，用户可以通过它上传缩略图。我遵循了，这是有效的

但是，我想跳过

上传

按钮：用户点击

选择文件

按钮，选择一个本地文件，然后我想文件自动上传，而无需点击

上传

按钮。使用指令控制

输入

，我不知道如何修改：

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body ng-app="app" ng-controller="Ctrl">
  <input type="file" file-model="myFile" />
  <button ng-click="uploadFile()">Upload</button>
  <script>
    var app = angular.module('app', []);
    app.controller('Ctrl', ['$scope', function($scope) {
      $scope.uploadFile = function() {
        // $scope.myFile is available here
        alert("uploadFile");
      }
    }]);

    angular.module('app').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]);
            });
          });
        }
      };
    }]);
  </script>
</body>
</html>


上传
var-app=angular.module（'app'，[]）；
app.controller（'Ctrl'，['$scope'，函数（$scope）{
$scope.uploadFile=函数（）{
//$scope.myFile在此处可用
警报（“上传文件”）；
}
}]);
angular.module（'app'）。指令（'fileModel'，['$parse'，函数（$parse）{
返回{
限制：“A”，
链接：函数（范围、元素、属性）{
var model=$parse（attrs.fileModel）；
var modelSetter=model.assign；
元素绑定（'change'，function（））{
作用域$apply（函数（）{
modelSetter（作用域，元素[0]。文件[0]）；
});
});
}
};
}]);

有人知道如何修改代码并实现这一点吗？

偶然地，我意识到只添加一行

scope.uploadFile（）

就可以做到：

  <script>
    var app = angular.module('app', []);
    app.controller('Ctrl', ['$scope', function($scope) {
      $scope.uploadFile = function() {
        // $scope.myFile is available here
        alert("uploadFile");
      }
    }]);

    angular.module('app').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]);
            });
            scope.uploadFile() // works
          });
        }
      };
    }]);
  </script>


var-app=angular.module（'app'，[]）；
app.controller（'Ctrl'，['$scope'，函数（$scope）{
$scope.uploadFile=函数（）{
//$scope.myFile在此处可用
警报（“上传文件”）；
}
}]);
angular.module（'app'）。指令（'fileModel'，['$parse'，函数（$parse）{
返回{
限制：“A”，
链接：函数（范围、元素、属性）{
var model=$parse（attrs.fileModel）；
var modelSetter=model.assign；
元素绑定（'change'，function（））{
作用域$apply（函数（）{
modelSetter（作用域，元素[0]。文件[0]）；
});
scope.uploadFile（）//有效
});
}
};
}]);