当用户 select 空目录时不会触发 onchange 事件

Question

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

请在下面找到相同的代码 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;
  };
});

笨蛋 link https://plnkr.co/edit/lDhoShIVgCXLd33mPtbh?p=preview

编写的代码适用于 selected 目录中有一些文件的情况。但是当我 select 空目录时它会触发 onchange 事件。

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

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

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

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

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

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

Answer 1

这看起来不太像 "Angular"。 Angular 方法是在 directive, and not in your controller. So you could try a file browser directive like in this jsfiddle. Ideally for your on-change directive, you would assign it a function, like on-change="doSomething()", and then in your controller, you can add logic for this function. See this post 中进行 DOM 操作，举一个额外的例子。

参见 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 2

文件输入适用于 selecting 文件。当你 select 一个目录（在 Chrome 中）时，它等同于 selecting 文件树中的所有文件（即包括 selected 目录中目录的文件） .

因此，如果您 select 编辑了一个空目录，它相当于没有文件 selection - 因此，触发更改事件毫无意义。

Answer 3

Chrome 使用空文件夹初始化 FileList 对象，更改事件的原因未被触发。我在 chromium https://bugs.chromium.org/p/chromium/issues/detail?id=590715 and it was merged to existing issue https://bugs.chromium.org/p/chromium/issues/detail?id=590715

中提出了一个问题

当用户 select 空目录时不会触发 onchange 事件

onchange event not getting triggered when user select empty directory

javascript

onchange

angularjs