Question

我正在使用ngImgCrop，如JSFiddle所示我试图实现的是当我显示（使用ng-if）时，图像选择框将自动打开：

<div ng-if="showImageSelector">
 <div>Select an image file: <input type="file" id="fileInput" /></div>
 <div class="cropArea">
  <img-crop image="myImage" result-image="myCroppedImage"></img-crop>
 </div>
</div>

即：我想以编程方式打开图像选择窗口，甚至不向用户显示：

<input type="file" id="fileInput" />

我尝试在控制器中输入几个输入点击事件的变体，但是没有一个工作，到目前为止我试过： 1。

$timeout(function() {
    angular.element('#fileInput').triggerHandler('click');
  }, 0);

2

angular.element(document).ready(function () {
    angular.element('#fileInput').triggerHandler('click');
  });

3

setTimeout(function(){
    angular.element('#fileInput').triggerHandler('click');
  }, 1000);

4

setTimeout(function(){
    document.getElementById('fileInput').click();
  }, 1000);

Answer 1

为了以编程方式触发文件选择器，答案是肯定的。

但您需要确保此事件是由用户解雇的。

例如，您有一个按钮，您可以在其上附加click事件。 用户点击此按钮后，在事件处理程序中，您可以使用javascript代码触发，例如document.getElementById('fileInput').click()。这应该有用。

但是，如果您只想运行多行javascript代码来打开文件选择器而无需用户点击，那就不可能，因为这违反了安全政策。

所以我added some code to your sample，

HTML，

<button ng-click='open()'>Open selector</button>

的javascript，

$scope.open = function() {
     document.getElementById('fileInput').click(); //this work
};

希望这可以解决您的问题。：）

Answer 2

结束用我的指令包装ngImgCrop，在其中放置：

$timeout(function () {
      angular.element(document.querySelector('#fileInput')).click();
      $log.debug("poped it");
    }, 250);

在链接功能中。除了我为img选择器显示的真实元素之外，我把它放在我的index.html：

<div ng-show="false">
  <my-image-select cropped-image="groupDetails.newPic" return-func="groupDetails.imageSelectFinish"></my-image-select>
</div>

它有效。如果没有index.html中额外的隐形my-image-select，文件选择器只能在第二次尝试时自动打开。

以编程方式以角度触发<input type =“file”/>文件选择

2 个答案: