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

时间:2015-02-27 10:01:35

标签: javascript html angularjs

我正在尝试模拟AngularJS中文件输入的click事件。我见过working jQuery examples,但我不想使用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>
&#13;
&#13;
&#13;

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

由于this post,我正在使用setTimeout

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

2 个答案:

答案 0 :(得分:39)

您只需使用

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

OR

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

答案 1 :(得分:0)

如果您想点击图标,按钮或跨度,触发“文件”类型的文件或打开选择文件窗口的方法;)

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

因此,我们使用这种方式自定义文件输入标记。