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;

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

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

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

Answer 1

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

以Angular的方式查看this cheat sheet。

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

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

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

Answer 3

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

用户选择空目录时，不会触发onchange事件

3 个答案: