web-dev-qa-db-fra.com

Déclencher un événement de clic sur le fichier d'entrée dans AngularJS

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?

javascripthtmlangularjs
14
Remco Haszing

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);
};
39
Satpal

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.

0
Abdallah Okasha