Javascript 使用Angular Js上传文件夹

我知道Angular Js可以上传文件。但我研究了一下，发现没有规定要上传整个文件夹。 我正在使用ASP.NET核心

是否可以使用AngularJS上载文件夹。也欢迎其他选择。

---

我还想知道ASP.NET Core中FolderBrowserDialog的等效功能是什么。

允许您上载图像文件夹。我还没有尝试过其他类型的文件

ng file upload是著名的AngularJS文件上传模块

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

这是链接

---

无法上载文件夹。您可以上载单个文件、多个文件或zip文件

为此，您可以使用

ng文件上传

---

现代浏览器支持，允许处理目录（文件夹）。在撰写本文时，这（没有旧的IE支持）

您至少有两种方法可以实现这一点（为了实现最佳用户体验，这两种方法都有好处！）

方法1：使用文件输入 通过属性赋予标准

input

元素处理目录的权限：

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

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

方法2：使用拖放 同一文件和目录条目API的另一部分是返回

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

函数删除（事件）{
const items=event.dataTransfer.items；
for（设i=0；i{
条目.文件（
文件=>{
解决（文件）；
},
错误=>{
拒绝（错误）；
}
);
});
}else if（entry.isDirectory）{
const directoryReader=entry.createReader（）；
返回新承诺（（解决、拒绝）=>{
directoryReader.readEntries(
条目=>{
解决（条目）；
},
错误=>{
拒绝（错误）；
}
);
});
}
}
}
}

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

---

这里有一个完整的Plunkr演示，来自文章：

谢谢，我会去看看：）如果每次我都有一美元，告诉我有些事情是不可能的，哈哈

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