[英]Trigger input file click event in AngularJS
我試圖模仿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以編程方式單擊文件輸入?
你可以簡單地使用
<button type="button" onclick="document.getElementById('input').click()">Click me!</button>
要么
$scope.click = function() {
setTimeout(function() {
document.getElementById('input').click()
$scope.clicked = true;
}, 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
因此,我們使用這種方式定制文件輸入標簽。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.