HTML5实现文件批量上传组件
以下是一个简单的HTML5批量文件上传组件示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文件批量上传</title>
</head>
<body>
<input type="file" id="file-upload" multiple />
<script>
document.getElementById('file-upload').addEventListener('change', function(e) {
const files = e.target.files;
const formData = new FormData();
for (let i = 0; i < files.length; i++) {
formData.append('file', files[i]);
}
// 使用fetch API发送文件
fetch('your-upload-url', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
});
</script>
</body>
</html>在这个例子中，我们使用了HTML的<input>元素和JavaScript来创建一个简单的文件批量上传组件。用户通过点击<input>选择文件后，这些文件会被添加到FormData对象中，然后通过fetch API以POST请求的方式发送到服务器。服务器端需要相应地处理这些文件。
评论已关闭