webentwicklung-frage-antwort-db.com.de

Klickereignis für Eingabedatei in AngularJS auslösen

Ich versuche, ein Klickereignis für eine Dateieingabe in AngularJS zu emulieren. Ich habe Arbeitsbeispiele für jQuery gesehen, möchte aber nicht jQuery verwenden.

'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>

Hinweis: Aus irgendeinem Grund muss die Taste zweimal gedrückt werden, um die Timeout-Funktion auszulösen.

Ich verwende setTimeout wegen diesem Beitrag .

Wie kann ich programmgesteuert auf eine Dateieingabe mit AngularJS/Vanilla JavaScript klicken?

14
Remco Haszing

Sie können einfach verwenden

 <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

Gehen Sie wie folgt vor, um Triggerdatei vom Typ 'Datei' oder Fenster zum Öffnen der Auswahldatei zu öffnen, wenn Sie nach Belieben auf ein Symbol, eine Schaltfläche oder einen Bereich klicken. 

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>

alle Credits gelten für diese Antwort: https://stackoverflow.com/questions/8595389/programmatic-trigger-select-file-dialog-box

Daher verwenden wir customized Dateieingabe-Tag auf diese Weise.

0
Abdallah Okasha