拖拽上传文件功能
拖拽事件
-
拖拽元素
- ondrag 应用于拖拽元素，整个拖拽过程都会调用
- ondragstart应用于拖拽元素，当拖拽开始时调用
- ondragleave应用于拖拽元素，当鼠标离开拖拽元素时调用
- ondragend应用于拖拽元素，当拖拽结束时调用
-
目标元素
- ondragenter应用于目标元素，当拖拽元素进入时调用
- ondragover应用于目标元素，当停留在目标元素上时调用
- ondrop应用于目标元素，当在目标元素上松开鼠标时调用
- ondragleave应用于目标元素，当鼠标离开目标元素时调用
实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
background: red;
}
.box2{
width: 200px;
height: 200px;
background: green;
position: absolute;
left: 300px;
top: 300px;
}
</style>
</head>
<body>
<!-- draggable="true" 允许不能拖拽的元素可以拖拽-->
<!-- 发现：拖拽的过程当中 禁止 符号 浏览器默认不允许你拖拽的元素放下-->
<div class="box1" draggable="true">你好</div>
<div class="box2"></div>
<script>
var div = document.querySelector('.box1');
var div2 = document.querySelector('.box2');
/*当前元素拖拽相关事件*/
div.addEventListener('drag',function (ev) {
//console.log('当前元素：拖拽中...');
});
div.addEventListener('dragstart',function (ev) {
//console.log('当前元素：拖拽开始');
});
div.addEventListener('dragend',function (ev) {
//console.log('当前元素：拖拽结束');
});
div.addEventListener('dragleave',function (ev) {
//console.log('当前元素：拖拽离开');
});
/*目标元素拖拽相关事件*/
div2.addEventListener('dragenter',function (ev) {
//console.log('目标元素：进入目标元素')
ev.preventDefault();
});
div2.addEventListener('dragleave',function (ev) {
//console.log('目标元素：离开目标元素')
});
div2.addEventListener('dragover',function (ev) {
//console.log('目标元素：目标元素移动')
ev.preventDefault();
});
div2.addEventListener('drop',function (ev) {
/*阻止浏览器默认行为*/
ev.preventDefault();
console.log('目标元素：松手投入')
});
</script>
</body>
</html>
上传代码
<!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>
网友评论