html带进度条的上传(支持拖拽上传)
时间: 2024-04-09 07:27:07 浏览: 8
你可以结合HTML5的拖放功能和XHR对象来实现带进度条的文件上传。以下是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<style>
#dropzone {
width: 200px;
height: 200px;
border: 2px dashed #ccc;
text-align: center;
padding: 10px;
font-size: 18px;
}
#progress {
width: 0%;
height: 10px;
background-color: #4CAF50;
}
</style>
</head>
<body>
<div id="dropzone">将文件拖放到此处</div>
<div id="progress"></div>
<script>
var dropzone = document.getElementById('dropzone');
var progress = document.getElementById('progress');
dropzone.addEventListener('dragover', function(e) {
e.preventDefault();
dropzone.style.backgroundColor = '#f7f7f7';
});
dropzone.addEventListener('dragleave', function(e) {
e.preventDefault();
dropzone.style.backgroundColor = '';
});
dropzone.addEventListener('drop', function(e) {
e.preventDefault();
dropzone.style.backgroundColor = '';
var files = e.dataTransfer.files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
console.log('文件名:', file.name);
console.log('文件大小:', file.size);
console.log('文件类型:', file.type);
// 创建FormData对象,用于发送文件数据
var formData = new FormData();
formData.append('file', file);
// 创建XHR对象
var xhr = new XMLHttpRequest();
// 监听上传进度
xhr.upload.addEventListener('progress', function(e) {
var percent = (e.loaded / e.total) * 100;
progress.style.width = percent + '%';
});
// 监听上传完成事件
xhr.addEventListener('load', function() {
console.log('上传完成');
});
// 发送POST请求
xhr.open('POST', 'upload.php');
xhr.send(formData);
}
});
</script>
</body>
</html>
```
在这个示例中,我添加了一个进度条元素`<div id="progress"></div>`,用于显示文件上传的进度。在上传过程中,通过监听XHR对象的`progress`事件,计算上传百分比并更新进度条的宽度。
你需要将代码中的`upload.php`替换为你实际处理文件上传的后端脚本。在该脚本中,你可以使用服务器端语言(如PHP、Node.js等)来处理上传文件的逻辑。
请注意,由于涉及到跨域请求,在实际应用中可能需要进行一些额外的配置和处理。此外,这只是一个基本的示例,你可以根据需要进行修改和扩展。