用户选择空目录时未触发 onchange 事件

Question

我想使用 angularjs 实现一个场景，其中用户选择一个目录，选择后需要对该目录中的每个文件进行一些处理。

请在下面找到相同的代码 HTML 文件：

<div ng-app="myApp" ng-controller="myCtrl">
  <input id="folder" type="file" onchange="angular.element(this).scope().checkFiles(this.files)" webkitdirectory="" directory="" multiple="" />
</div>

Javascript 代码

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

  $scope.checkFiles = function(files) {
    console.log(files);

    //add below line of code to trigger onchange event if user select same directory
    angular.element(document.querySelector('#folder'))[0].value = null;
  };
});

Plunker 链接https://plnkr.co/edit/lDhoShIVgCXLd33mPtbh?p=preview

当所选目录中有一些文件时，编写的代码工作。但是当我选择空目录时，它会触发 onchange 事件。

我尝试了很多，但没有找到导致这种行为的根本原因。

我注意到的一件事是，当我删除下面的代码行时

    //add below line of code to trigger onchange event if user select same directory
    angular.element(document.querySelector('#folder'))[0].value = null;

并选择一个包含一些文件的目录，然后选择一个空的目录 onchange 事件被触发。但是如果我第一次尝试直接选择空目录，则不会触发 onchange 事件。

需要知道为什么没有为空目录触发 onchange 事件。

注意：请在其他浏览器不支持的 chrome 浏览器上尝试此代码

Answer 1

文件输入用于选择文件。当您选择一个目录时（在 Chrome 中），它相当于选择了文件树中的所有文件（即包括所选目录内的目录文件）。

因此，如果您选择了一个空目录，则相当于没有选择文件 - 因此，触发更改事件没有任何意义。

Answer 2

这看起来不太“有棱角”。 Angular 的方式是在 directive 中进行 DOM 操作，而不是在您的控制器中。所以你可以尝试像jsfiddle 这样的文件浏览器指令。理想情况下，对于您的 on-change 指令，您可以为其分配一个函数，例如 on-change="doSomething()"，然后在您的控制器中，您可以为此函数添加逻辑。有关其他示例，请参阅 this post。

请参阅this cheat sheet，了解以 Angular 的方式做事。

HTML：

<div ng-controller="parentController">
    <p><a ng-click="load('one.tpl')">One</a> | <a ng-click="load('two.tpl')">Two</a></p>
    <hr>
    <div ng-include="tpl"></div>
</div>

<script type="text/ng-template" id="one.tpl">
    <p>Template One</p>
    <div file-browser>
        <input type="file" name="upload-file">
    </div>
</script>

JS：

angular.module('testapp').controller('parentController', function($scope) {
    $scope.load = function(tpl) {
        $scope.tpl = tpl;
    };
    $scope.load('one.tpl');
});
angular.module('testapp').directive('fileBrowser', function() {
    return {
        restrict: 'A',
        replace: true,
        transclude: true,
        scope: false,
        template:
            '<div class="input-prepend extended-date-picker">'+
                '<input type="button" class="btn" value="browse...">'+
                '<input type="text" readonly class="override">'+
                '<div class="proxied-field-wrap" ng-transclude></div>'+
            '</div>',
        link: function($scope, $element, $attrs, $controller) {
            var button, fileField, proxy;
            fileField = $element.find('[type="file"]').on('change', function() {
                proxy.val(angular.element(this).val());
            });
            proxy = $element.find('[type="text"]').on('click', function() {
                fileField.trigger('click');
            });
            button = $element.find('[type="button"]').on('click', function() {
                fileField.trigger('click');
            });
        }
    };
});

Answer 3

Chrome 使用未触发更改事件原因的空文件夹初始化 FileList 对象。 我在铬https://bugs.chromium.org/p/chromium/issues/detail?id=590715 中提出了一个问题，它已合并到现有问题https://bugs.chromium.org/p/chromium/issues/detail?id=590715