方法1：使用文件输入

Question

我知道Angular Js可以上传文件。但我研究并发现没有关于整个文件夹上传的规定。我正在研究ASP.NET Core。

使用AngularJS可以上传文件夹。也欢迎替代品。另外，我想知道ASP.NET Core中的FolderBrowserDialog是等效的。

Answer 1

现代浏览器支持允许处理目录（文件夹）的File and Directory Entries API。在撰写本文时，这是works in Chrome, Firefox, Edge and Safari TP（没有旧的IE支持）。

您至少有两种方法可以实现这一点（布朗尼点是为了获得最佳用户体验！）。

方法1：使用文件输入

通过webkitdirectory属性为标准input元素提供处理目录的能力：

<input
    #folderInput
    type="file"
    (change)="filesPicked(folderInput.files)"
    webkitDirectory
>

注意：上面的HTML代码段假设Angular 2+，但你可以在Angular 1中轻松做同样的事情

folderInput.files将是文件夹中所有文件的平面列表，无需递归遍历树或类似的任何内容。只需在这样的简单循环中遍历文件：

function filesPicked(files) {
    for (let i = 0; i < files.length; i++) {
        const file = files[i];
        const path = file.webkitRelativePath.split('/');
        // upload file using path
        ...
    }
}

顾名思义，属性webkitRelativePath包含文件相对于用户选择的祖先目录的路径。

方法2：使用拖放

同一文件和目录条目API的另一部分是DataTransferItem.webkitGetAsEntry()，它返回FileSystemFileEntry或FileSystemDirectoryEntry。如果它是直接的，您可以通过调用FileSystemDirectoryReader检索到的FileSystemDirectoryEntry.createReader()来阅读它。以下是处理drop事件的简短示例：

function drop(event) {
    const items = event.dataTransfer.items;
    for (let i = 0; i < items.length; i++) {
        const item = items[i];
        if (item.kind === 'file') {
            const entry = item.webkitGetAsEntry();
            if (entry.isFile) {
                 return new Promise((resolve, reject) => {
                    entry.file( 
                        file => {
                            resolve(file);
                        },
                        err => {
                            reject(err);
                        }
                    );
                });
            } else if (entry.isDirectory) {
                const directoryReader = entry.createReader();
                return new Promise((resolve, reject) => {
                    directoryReader.readEntries(
                        entries => {
                            resolve(entries);
                        },
                        err => {
                            reject(err);
                        }
                    );
                });
            }
        }
    }
}

我的同事写了a short article更详细地解释了这个方法（免责声明：我为那家公司工作）。

以下是文章中完整有效的Plunkr演示：https://plnkr.co/edit/rFC9Ln

Answer 2

Flow.js可让您上传图片文件夹。我没有尝试过其他文件类型。

Answer 3

ng-file-upload是众所周知的AngularJS文件上传模块。

它讨论了多个文件上传。不确定它是否正是你想要的。

继承人的链接......

https://github.com/danialfarid/ng-file-upload/blob/master/README.md#user-content--usage

Answer 4

无法上传文件夹。您可以上传单个文件，多个文件或zip文件。

为此，您可以使用ng-file-upload

You may get this module over here

使用Angular Js上传文件夹

4 个答案:

方法1：使用文件输入

方法2：使用拖放