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

Question

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

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

Answer 1

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

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

    function add Files(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);
            });
        }
    },

Answer 2

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

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

Quarklemotion Html5FileSelector

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

Dropzone JS

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

Answer 3

您可以使用该webkitdirectory属性：

\n

\r\n

\r\n

let picker = document.getElementById(\'picker\');\nlet listing = document.getElementById(\'listing\');\n\npicker.addEventListener(\'change\', e => {\n  for (let file of Array.from(e.target.files)) {\n    let item = document.createElement(\'li\');\n    item.textContent = file.webkitRelativePath;\n    listing.appendChild(item);\n  };\n});

\r\n

(Forked from <a href=\'https://codepen.io/simevidas\'>\xc5\xa0ime Vidas\' Pen</a> for posting on Stack Overflow)<br><br>\n\n<div class="picker"><input type="file" id="picker" name="fileList" webkitdirectory multiple></div>\n\n<ul id="listing"></ul>

\r\n

\r\n

\r\n

\n