在输入文件类型中选择文件时，如何触发按钮单击事件？
[英]How to fire button click event when file selected in input file type?
问题描述
I have a file <input /> and a <button> , with a click handler assigned to the button. 
我有一个文件<input />和一个<button> ，并为按钮分配了一个单击处理程序。
What I would like to do is to execute the click handler on the submit button when the selected file changes on the file input. 我想做的是，当所选文件在文件输入上更改时，在提交按钮上执行单击处理程序。
My code currently looks like this: 我的代码当前如下所示：
angular.module('myapp', []) .controller('MyController', function($scope) { $scope.clickMe= function(){ alert("File Submitted!"); } });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app="myapp"> <div ng-controller="MyController"> <input type = "file"> <div><button ng-click="clickMe()">Submit</button></div> </div> </body>
1 个解决方案
解决方案1
1 已采纳 2019-03-02 09:53:06
If I understand your question correctly, then you should find that the logic fired when the submit button is clicked, can instead be automatically invoked when a file is picked on your <input type="file" /> element by updating your template as follows: 如果我正确理解了您的问题，那么您应该发现单击“提交”按钮时触发的逻辑可以改为通过按如下方式更新模板在<input type="file" />元素上选择文件时自动调用的逻辑：
<input type="file" onchange="angular.element(this).scope().clickMe(this)">
This will cause the clickMe() function on the $scope object of the enclosing controller MyController , to be called. 这将导致封闭控制器MyController的$scope对象上的clickMe()函数被调用。 Here's a complete example (with submit button removed seeing it's redundant): 这是一个完整的示例（删除提交按钮会看到多余的示例）：
angular.module('myapp', []) .controller('MyController', function($scope) { $scope.clickMe = function() { alert("File Submitted!"); } });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></script> <body ng-app="myapp"> <div ng-controller="MyController"> <input type="file" onchange="angular.element(this).scope().clickMe(this)"> </div> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.