在JavaScript中无法直接上传整个文件夹,但可以通过以下步骤实现上传文件夹的功能:
- 使用
未选择任何文件
标签来选择文件夹。该标签支持同时选择多个文件和文件夹。
未选择任何文件
- 监听文件夹选择变化的事件,并获取所选择的文件和文件夹。
const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', function(e) {
const files = e.target.files;
processFiles(files);
});
- 遍历所选择的文件和文件夹,递归处理文件夹中的文件。
function processFiles(files) {
for (let i = 0; i < files.length; i++) {
const file = files[i];
if (file.type === 'directory') {
processDirectory(file);
} else {
uploadFile(file);
}
}
}
function processDirectory(directory) {
const entries = directory.createReader().readEntries();
entries.then(function(files) {
processFiles(files);
});
}
function uploadFile(file) {
// 实现文件上传逻辑
}
- 在
uploadFile
函数中实现文件上传逻辑。你可以使用AJAX或Fetch API将文件发送到服务器。
function uploadFile(file) {
const formData = new FormData();
formData.append('file', file);
// 使用AJAX或Fetch API发送formData到服务器
// ...
}
请注意,这是一种客户端实现,服务器端需要根据所使用的服务端技术进行相应的处理。实现上传文件夹可能涉及到多个文件的上传,你需要在服务器端对多个文件进行处理和保存。
参考文章:http://blog.ncmem.com/wordpress/2023/12/06/js%e4%b8%8a%e4%bc%a0%e6%96%87%e4%bb%b6%e5%a4%b9%e7%9a%84%e5%8a%9f%e8%83%bd%e5%a6%82%e4%bd%95%e5%ae%9e%e7%8e%b0/
欢迎入群一起讨论