拖拽上傳事件：
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);