HTML5如何实现同时选择多个文件夹上传
在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。此外,上传逻辑需要根据服务器端的具体要求进行适配。
评论已关闭