HTML5通过api实现拖放效果 dataTransfer对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drag and Drop Example</title>
<style>
#dropZone {
width: 300px;
height: 200px;
border: 2px dashed #aaa;
text-align: center;
line-height: 200px;
font-size: 24px;
color: #ccc;
position: relative;
}
#preview {
width: 100px;
height: 100px;
border: 1px solid #000;
position: absolute;
top: 5px;
left: 5px;
display: none;
}
</style>
</head>
<body>
<div id="dropZone">Drop Image Here</div>
<img id="preview" src="" alt="Image preview will be shown here">
<script>
const dropZone = document.getElementById('dropZone');
const preview = document.getElementById('preview');
dropZone.addEventListener('dragover', function(event) {
event.stopPropagation();
event.preventDefault();
event.dataTransfer.dropEffect = 'copy';
});
dropZone.addEventListener('drop', function(event) {
event.stopPropagation();
event.preventDefault();
const files = event.dataTransfer.files;
if (files.length > 0) {
// 使用FileReader读取第一个文件并显示预览
const file = files[0];
const reader = new FileReader();
reader.onload = function(event) {
preview.src = event.target.result;
preview.style.display = 'inline';
};
reader.readAsDataURL(file);
}
});
</script>
</body>
</html>这段代码实现了一个简单的拖放图片并显示预览的功能。用户可以将图片拖拽到指定的dropZone区域，然后代码通过FileReader API读取这个图片文件，并将其显示在preview图片元素中。这个例子展示了如何使用HTML5的拖放API以及如何处理文件。
评论已关闭