拖拽事件
- 拖拽元素
- ondrag 应用于拖拽元素，整个拖拽过程都会调用
- ondragstart应用于拖拽元素，当拖拽开始时调用
- ondragleave应用于拖拽元素，当鼠标离开拖拽元素时调用
- ondragend应用于拖拽元素，当拖拽结束时调用
- 目标元素
- ondragenter应用于目标元素，当拖拽元素进入时调用
- ondragover应用于目标元素，当停留在目标元素上时调用
- ondrop应用于目标元素，当在目标元素上松开鼠标时调用
- ondragleave应用于目标元素，当鼠标离开目标元素时调用
上传案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 200px;
height: 200px;
border: 1px dashed #ccc;
line-height: 200px;
text-align: center;
color: #ccc;
}
</style>
</head>
<body>
<div class="box">拖放图片到该区域</div>
<script>
var box = document.querySelector('.box');
box.addEventListener('dragenter', function (e) {
/*禁用浏览器默认预览文件或下载文件操作*/
e.preventDefault();
});
box.addEventListener('dragover', function (e) {
/*禁用浏览器默认预览文件或下载文件操作*/
e.preventDefault();
});
box.addEventListener('drop', function (e) {
e.preventDefault();
/*第一个文件数据*/
var file = e.dataTransfer.files[0];
//console.log(file);
/*把数据设置到表单数据中*/
var formData = new FormData();
formData.append('dragImage', file);
/*通过ajax异步提交*/
var xhr = new XMLHttpRequest();
xhr.open('post','upload.php');
xhr.send(formData);
xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status == 200){
/*上传成功*/
console.log('ok');
var img = new Image();
img.src = xhr.responseText;
document.querySelector('body').appendChild(img);
}
}
});
</script>
</body>
</html>
<?php
$image = $_FILES;
//var_dump($image);
move_uploaded_file($image['image']['tmp_name'],$image['image']['name']);
echo $image['image']['name'];
?>
