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

我想使用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>

插销连杆

当所选目录中有一些文件时，编写的代码将起作用。但当我选择空目录时，它会触发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事件

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

这看起来不太“棱角分明”。角度方法是在中进行DOM操作，而不是在控制器中。因此，您可以尝试这样的文件浏览器指令。理想情况下，对于您的

on change

指令，您可以为其分配一个函数，如

on change=“doSomething（）”

，然后在控制器中，您可以为该函数添加逻辑。有关其他示例，请参见

看看如何用有棱角的方式做事

HTML:

一二


模板一

JS:

angular.module（'testapp'）.controller（'parentController'，function（$scope）{
$scope.load=功能（tpl）{
$scope.tpl=tpl；
};
$scope.load（'one.tpl'）；
});
angular.module（'testapp'）。指令（'fileBrowser'，function（）{
返回{
限制：“A”，
替换：正确，
是的，
范围：假，
模板：
''+
''+
''+
''+
'',
链接：函数（$scope、$element、$attrs、$controller）{
var按钮、文件字段、代理；
fileField=$element.find（'[type=“file”]'）。在（'change'，function（）上{
val（angular.element（this.val（））；
});
proxy=$element.find（'[type=“text”]'）。在（'click'，function（）上{
触发器（'click'）；
});
button=$element.find（'[type=“button”]'）。在（'click'，function（）上{
触发器（'click'）；
});
}
};
});

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

---

因此，如果您选择了一个空目录，则表示没有文件选择，因此，不会触发任何更改事件。

Chrome会使用一个空文件夹初始化FileList对象，该文件夹不会触发“更改原因”事件。

---

我在chromium中提出了一个问题，该问题已合并到现有问题中

Angular或not，您无法选择目录。但您可以选择一个或多个文件，然后文件输入将触发一个更改事件。@IgweKalu的可能副本我想选择目录，我能做到这一点，请检查plunker链接。我只想知道为什么选择空目录时会触发onchange事件。每次我选择目录并单击“选择”时，它只是简单地打开目录以显示其内容。在此之后，只有取消选项被启用，除非您选择一个文件或目录（在这种情况下，它只会再次打开该目录）。我不知道你是怎么做到的。我希望我能帮助你……此外，请注意，除非真的有变化，否则不会触发变化事件。例如，如果先前选择了文件a.text，然后稍后再次选择它，则不会触发更改事件。当且仅当当前选择与上一个不同时，才会触发更改。但是，如果您对plunker.element（document.querySelector（“#folder”）[0]中的第9行代码进行注释，则会触发更改。value=null；首先选择一个非空目录，然后在触发chnge事件时选择一个空目录。我希望我能提供更多。我可以删除这个答案，如果它没有任何帮助。

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

<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>

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');
            });
        }
    };
});