输入文件点击事件不等待chrome上的文件选择[重复]

Question

我采用了一个在 IE 上运行良好的代码并在 Chrome 上进行测试，我发现浏览器不会等到用户选择了他的文件才继续执行代码。

HTML：

<input type="file" accept=".jpg" id="flNewDoc" name="flNewDoc" 
       style="display:none" />
<input ng-model="vm.currentPiece.OriginalName" type="text" id="txtNewFile" 
       readonly />
<button type="button" ng-click="vm.openFileDialog()">
    <i class="fa fa-folder-open-o"></i>
</button>

AngularJS 控制器：

vm.openFileDialog = function () {
    var element = angular.element('#flNewDoc');
    element.trigger('click');
    console.log("click triggered");
    vm.newFile = element[0].files[0];
    vm.newFileName = element[0].value;
    vm.uploadFile();
    console.log("file upload ended");
};
vm.uploadFile = function () {
    if (vm.newFile) {
        vm.currentPiece = {
            isNew: true,
            isToDelete: false,
            isLoading: true,
        };
        dataSrv.uploadReunionDocument(vm.newFile).then(function (resp) {
            Object.assign(vm.currentPiece, resp.data)
            vm.currentPiece.isLoading = false;
            vm.newFile = undefined;
            vm.newFileName = '';
        }, function (error) {
            vm.currentPiece.isLoading = false;
            console.log(error);
        });
    }
};

使用 IE，我的代码块在 element.trigger('click') 行暂停，因此用户可以选择他的文件并直接开始下载（客户端请求）。在 chrome 中，我们看到选择窗口打开，但代码继续运行而没有暂停

如何调整我的代码，使其在两种浏览器上都能按预期工作？

Answer 1

您应该使用change 处理程序中的选定文件定义部件，因为文件选择必须触发这样的处理程序。

angular.module('myApp', [])
  .controller("MyCtrl", function() {
    const vm = this;


    vm.openFileDialog = function() {
      element.trigger('click');
      console.log("click triggered");
    };
    vm.uploadFile = function() {
      if (vm.newFile) {
        vm.currentPiece = {
          isNew: true,
          isToDelete: false,
          isLoading: true,
        };
        console.log('dataSrv.uploadReunionDocument')
        /*
        dataSrv.uploadReunionDocument(vm.newFile).then(function(resp) {
          Object.assign(vm.currentPiece, resp.data)
          vm.currentPiece.isLoading = false;
          vm.newFile = undefined;
          vm.newFileName = '';
        }, function(error) {
          vm.currentPiece.isLoading = false;
          console.log(error);
        });
        */
      }
    };



    var element = angular.element('#flNewDoc');
    element.on('change', function() {
      vm.newFile = element[0].files[0];
      vm.newFileName = element[0].value;
      vm.uploadFile();
      console.log("file upload ended");
    })
  })

<style src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"></style>.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js"></script>

<div ng-app="myApp" ng-controller="MyCtrl as vm">

  <input type="file" accept=".jpg" id="flNewDoc" name="flNewDoc" style="display:none" />
  <input ng-model="vm.currentPiece.OriginalName" type="text" id="txtNewFile" readonly />
  <button type="button" ng-click="vm.openFileDialog()"><i class="fa fa-folder-open-o"></i></button>

</div>