HTML5文件拖动代码
以下是一个基本的HTML5文件拖动代码：
<!DOCTYPE html>
<html>
<head>
<title>HTML5 File Drag and Drop</title>
<style>
#dropzone {
width: 200px;
height: 200px;
border: 2px dashed #ccc;
border-radius: 5px;
text-align: center;
font-size: 20px;
line-height: 200px;
}
</style>
</head>
<body>
<div id="dropzone">Drop files here</div>
<script>
var dropzone = document.getElementById('dropzone');
// 防止浏览器默认行为
dropzone.addEventListener('dragover', function(event) {
event.preventDefault();
});
// 处理拖动文件事件
dropzone.addEventListener('drop', function(event) {
event.preventDefault();
var files = event.dataTransfer.files; // 获取拖动的文件
for (var i = 0; i < files.length; i++) {
console.log(files[i].name); // 输出文件名
}
});
</script>
</body>
</html>
以上代码创建了一个div元素作为拖放区域，当文件被拖动到该区域时，通过JavaScript代码处理文件。dragover事件被用来防止浏览器默认行为，而drop事件则被用来处理拖动的文件。在drop事件处理程序中，我们可以通过event.dataTransfer.files获取拖动的文件对象。在上述示例中，我们只是简单地打印出每个文件的名称。您可以根据需要进一步处理这些文件。
原文地址: http://www.cveoy.top/t/topic/bFCE 著作权归作者所有。请勿转载和采集!