J'essaie d'émuler un événement de clic sur une entrée de fichier dans AngularJS. J'ai vu des exemples de travail jQuery , mais je ne veux pas utiliser 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>
Remarque: pour une raison quelconque, vous devez appuyer deux fois sur le bouton afin de déclencher la fonction de temporisation.
J'utilise setTimeout
à cause de ce post .
Comment puis-je cliquer par programmation sur une entrée de fichier uniquement avec AngularJS/Vanilla JavaScript?
Vous pouvez simplement utiliser
<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);
};
Voici comment déclencher un fichier de type 'fichier' ou ouvrir la fenêtre de sélection-fichier lorsque vous cliquez sur l'icône, le bouton ou la plage souhaitée;)
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>
tous les crédits vont pour cette réponse: https://stackoverflow.com/questions/8595389/programmatically-trigger-select-file-dialog-box
Ainsi, nous customisons les balises d’entrée de fichiers en utilisant cette méthode.