从文件浏览器窗口中选择文件后如何显示引导弹出框？

Question

所以，我有一个下拉列表，其中包含一个从系统导入文件的按钮：

 <input type="file" id="fileSelected" class="upload" data-toggle="modal" value="Import" data-target="#importData"/>

因此，当用户从文件浏览器中选择一个文件并单击“确定”时，应该会出现一个引导模式框，其中显示所选文件的详细信息。引导弹出窗口的代码：

<div class="modal fade" id="importData" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="fathomLoginLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div id="popupDiv" ng-show="popUp" class="col-sm-12">
             <!--Some more content here-->
        </div>
       </div>
    </div>
</div>

触发弹窗的代码是：

$("#fileSelected").select(function(){
            $scope.showPopUp();
});
 $scope.showPopUp = function(){
        $scope.popUp = true;
        for(var i=0;i<9;++i){
           $timeout(function(){$scope.uploadCompleted += 0.1*($scope.uploadTotal);console.log($scope.uploadCompleted);},4000);
        }
        $scope.checkComplete();
   }

问题是当我在文件浏览器窗口上单击“确定”时，它没有显示模式弹出框。它只是淡化背景，什么都不做。

Answer 1

您可以触发文件输入的更改事件。选择文件时会调用更改事件。

例子：

$("#fileSelected").change(function(){
    $(".modal").show();
});

Answer 2

尝试使用此事件

$("#fileSelected").change(function(){
     //your action
 });