HTML5如何实现同时选择多个文件夹上传
warning:
这篇文章距离上次修改已过451天，其中的内容可能已经有所变动。
在HTML5中，要实现同时选择多个文件夹进行上传，你需要使用<input>元素并设置webkitdirectory属性（这是一个非标准属性，但被主流浏览器支持）。此外，为了能够选择多个文件夹，你还需要设置multiple属性。
以下是实现这一功能的示例代码：
<!DOCTYPE html>
<html>
<head>
<title>多文件夹上传</title>
</head>
<body>
<input type="file" id="folderInput" webkitdirectory directory multiple />
<script>
document.getElementById('folderInput').addEventListener('change', function(e) {
var files = e.target.files;
var data = new FormData();
for (var i = 0; i < files.length; i++) {
data.append('folder', files[i]);
}
// 使用FormData进行文件上传的操作
// 这里只是示例，你需要替换为你的上传逻辑
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload/path', true);
xhr.send(data);
});
</script>
</body>
</html>在这个例子中，用户可以选择一个或多个文件夹，每当文件夹被添加到选择列表中，change事件就会被触发，然后JavaScript代码会将所有选中的文件夹添加到FormData对象中，并发送到服务器进行处理。
请注意，上述代码中的/upload/path是假定的服务器端接收上传文件的URL，你需要替换为实际的URL。此外，上传逻辑需要根据服务器端的具体要求进行适配。
评论已关闭