拖拽上传事件:
ondragenter 拖着东西进入;
ondragleave 拖着东西离开;
ondragover 悬停;
ondrop 松手;
小demo:
client端代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.drag {
width: 400px;
height: 150px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -200px;
text-align: center;
line-height: 150px;
border: 1px solid balck;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="drag">
拖拽上传
</div>
</body>
<script>
window.onload = function () {
let div1 = document.querySelector('.drag');
div1.ondragenter = () => {
console.log('aaa');
div1.innerHTML = '松手';
}
div1.ondragleave = () => {
div1.innerHTML = '拖拽上传';
}
div1.ondragover = () => { // 只要鼠标一直没有松手,并且一直没有离开,就会一直触发
console.log('ondragover');
return false; // 不阻止默认事件,ondrop事件不会触发
}
div1.ondrop = (event) => {
// console.log(event.dataTransfer.files);
let data = new FormData();
Array.from(event.dataTransfer.files).forEach(file => {
data.append('f1',file);
});
let OAjax = new XMLHttpRequest();
OAjax.open('post','http:localhost:3000/upload');
OAjax.send(data);
OAjax.onreadystatechange = function() {
if(OAjax.readyState === 4) {
if(OAjax.status >= 200 && OAjax.status < 300 || OAjax.status == 304) {
alert('上传成功');
} else {
alert('上传失败')
}
}
}
div1.innerHTML = '拖拽上传';
return false; // 阻止默认事件
}
}
</script>
</html>
server端代码:
const express = require('express'); // 主体
const body = require('body-parser'); // 接受普通POST数据
const multer = require('multer'); // 接收文件POST数据
let server = express();
// 中间件
server.use(body.urlencoded({extended: false}));
let multerObj = multer({dest: './upload/'}); // 上传到哪里去
server.use(multerObj.any()); // 任何
server.post('/upload',(req,res)=>{
res.header('Access-Control-Allow-Origin','*'); // *号允许所有的域名,跨域;不安全
res.send('ok');
console.log(req.body);
console.log(req.files);
});
server.listen(3000);