AngularJS实现目录拖放

Question

我有一个有效的AngularJS Web应用程序，允许用户使用拖放功能上传文件或选择的文件。我想实现目录上传，我设法实现的是检测拖放是文件列表还是目录

这是我的指示

var fileDropZone = function ($window) {
    $($window).on('dragover', function (windowEvent) { e = windowEvent || event; e.preventDefault(); }, false);
    $($window).on('drop', function (windowEvent) { e = windowEvent || event; e.preventDefault(); }, false);

    return {
        restrict: 'E',
        template: '<div><input type="file" multiple="multiple" webkitdirectory mozdirectory style="display:none;" /><div class="drop-zone">{{ supported ? dropZoneMessage : notSupportedMessage }}<div></div>',
        replace: true,
        scope: {
            dropZoneMessage: '@',
            notSupportedMessage: '@',
            files: '=ngModel',
            filesAdded: '&ngChange'
        },
        link: function ($scope, $element, $attributes) {

            if (!window.FormData) {
                $scope.supported = false;
            }
            else {
                var dropZone = $element.find('.drop-zone');
                var input = $element.find('input');
                $scope.supported = true;

                var setFiles = function (files) {
                    $scope.$apply(function () {
                        $scope.files.splice(0);
                        angular.forEach(files, function (file) {
                            $scope.files.push({ file: file, fileName: file.name, progress: 0, status: 'Uploading...' });
                        });
                        $scope.filesAdded();
                    });
                };

                input.on('change', function () { setFiles(input[0].files); });

                dropZone.on('click', function () { input.click(); });

                dropZone.on('dragover', function (event) {
                    event.stopPropagation();
                    event.preventDefault();
                    event.originalEvent.dataTransfer.dropEffect = 'copy';
                });

                dropZone.on('drop', function (event) {
                    event.stopPropagation();
                    event.preventDefault();

                    var entry = event.originalEvent.dataTransfer.items[0].webkitGetAsEntry();
                    if (entry.isDirectory) {
                        alert("it is a directory!");
                    }
                    else
                    {
                        setFiles(event.originalEvent.dataTransfer.files);
                    }
                });
            }
        }
    };
};

app.directive('fileDropZone', ['$window', fileDropZone]);

当我拖放目录但是我无法检索文件列表时，代码正确显示alert()。对象内不存在文件列表。当我拖放文件或文件列表时，一切正常