在 JavaScript 中上传文件夹及其所有内容

Question

如何使用 JavaScript（客户端）上传文件夹的内容？ FileSystem API 尚未被 Chrome 以外的浏览器采用；我只得到一个带有文件夹名称的文件项。

应该可以，因为 Google 云端硬盘允许删除文件夹，所有内容（文件夹和文件）都会自动上传。

原文由 Eduardo Alonso 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Chrome 和 Firefox 似乎支持部分文件系统 API，但官方不支持。

这允许您放下一个文件夹并阅读所有内容，这是我在我的应用程序中使用的代码。

     function addFiles(e){
        e.stopPropagation();
        e.preventDefault();

        // if directory support is available
        if(e.dataTransfer && e.dataTransfer.items)
        {
            var items = e.dataTransfer.items;
            for (var i=0; i<items.length; i++) {
                var item = items[i].webkitGetAsEntry();

                if (item) {
                  addDirectory(item);
                }
            }
            return;
        }

        // Fallback
        var files = e.target.files || e.dataTransfer.files;
        if (!files.length)
        {
            alert('File type not accepted');
            return;
        }

        processFile(files);
    }

    function addDirectory(item) {
        var _this = this;
        if (item.isDirectory) {
            var directoryReader = item.createReader();
            directoryReader.readEntries(function(entries) {
            entries.forEach(function(entry) {
                    _this.addDirectory(entry);
                });
            });
        } else {
            item.file(function(file){
                processFile([file],0);
            });
        }
    },

原文由 Eduardo Alonso 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

实际上，您可以在所有最新版本的 Chrome、Firefox 和 Microsoft Edge 中上传目录。有许多工作示例可供查看。

这是我以前在项目中使用过的一个很好的工作示例

Quarklemotion Html5文件选择器

此外，Dropzone JS 还支持目录上传，适用于 Chrome、FF 和 Edge。我刚刚过渡到在我自己的项目中使用它。

Dropzone JS

这些解决方案递归地读取目录条目并列出所有文件，包括它们的相对路径。如果您想在上传时重建文件夹结构，则必须使用相对路径和适当的算法来实现。

原文由 CaseyC 发布，翻译遵循 CC BY-SA 3.0 许可协议