logo标签列表

Angular Js 中的文件夹上传

javascriptangularjsasp.net-core
5

我知道AngularJS可以实现文件上传，但是我研究了一下发现没有提供上传整个文件夹的功能。 我正在使用ASP.NET Core。

请问AngularJS是否支持文件夹上传？如果不行，欢迎提供其他替代方案。 同时，我想知道在ASP.NET Core中FolderBrowserDialog的等价物是什么。

4个回答
7
现代浏览器支持文件和目录条目API，允许处理目录（文件夹）。撰写时，此功能在Chrome、Firefox、Edge和Safari TP中可用（不支持旧版IE）。
您至少有两种实现方式（最佳UX的做法是两种都实现）。
方法1：使用文件输入
通过{{link3：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：使用拖放

同一File and Directory Entries API的另一个部分是DataTransferItem.webkitGetAsEntry()，它返回一个FileSystemFileEntry或FileSystemDirectoryEntry。如果它是一个目录，你可以通过调用FileSystemDirectoryEntry.createReader()来获取FileSystemDirectoryReader并读取它。下面是处理拖放事件的简要示例：

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);
                        }
                    );
                });
            }
        }
    }
}

我的同事写了一篇简短的文章，更详细地解释了这种方法（免责声明：我在那家公司工作）。

这是文章中的完全可用的Plunkr演示：https://plnkr.co/edit/rFC9Ln

0
-1

Flow.js 允许您上传图像文件夹。不过，我还没有尝试过其他文件类型。

谢谢，我会去看看 :) - diva
-1
1
如果我有一美元，每次有人告诉我某件事不可能的时候哈哈笑一次。 - bryan
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接