在AngularJS中触发输入文件单击事件

Question

我试图模仿AngularJS中的文件输入上的单击事件。 我见过工作jQuery示例 ，但我不想使用jQuery。

 'use strict'; angular.module('MyApp', []). controller('MyCtrl', function($scope) { $scope.click = function() { setTimeout(function() { var element = angular.element(document.getElementById('input')); element.triggerHandler('click'); $scope.clicked = true; }, 0); }; }); 

 <script src="https://code.angularjs.org/1.3.14/angular.js"></script> <div ng-app="MyApp" ng-controller="MyCtrl"> <input id="input" type="file"/> <button ng-click="click()">Click me!</button> <div ng-if="clicked">Clicked</div> </div> 

注意：由于某种原因，需要按两次按钮才能触发超时功能。

由于这篇文章，我正在使用setTimeout 。

如何使用AngularJS / vanilla JavaScript以编程方式单击文件输入？

Answer 1

你可以简单地使用

 <button type="button" onclick="document.getElementById('input').click()">Click me!</button>

要么

$scope.click = function() {
    setTimeout(function() {
        document.getElementById('input').click()
        $scope.clicked = true;
    }, 0);
};

Answer 2

以下是如何在单击图标，按钮或跨度时触发“文件”类型的文件或打开选择文件窗口 ;）

css：

.attachImageForCommentsIcon{
  padding-top: 14px;
  padding-right: 6px;
  outline:none;
  cursor:pointer;
}

HTML：

<input id="myInput" type="file" style="visibility:hidden" ng-file-model=""/>
<i onclick="$('#myInput').click();" class="attachImageForCommentsIcon blue-2 right-position material-icons">image</i>

所有学分都是为了这个答案： https ： //stackoverflow.com/questions/8595389/programmatically-trigger-select-file-dialog-box

因此，我们使用这种方式定制文件输入标签。