1.拖拽上传相关事件
2.拖拽上传实现
1.拖拽上传相关事件
相关事件：
- ondragenter 拖着东西进入
- ondragleave 拖着东西离开
- ondragover 悬停
- ondrop 松手
2.拖拽上传实现
前端代码：
1 <!-- author: wyb --> 2 <!DOCTYPE html> 3 <html> 4 <head> 5 ????<meta charset="utf-8"> 6 ????<title>文件拖拽上传</title> 7 ????<style> 8 ????????.box { 9 ????????????width: 400px;10 ????????????height: 150px;11 ????????????border: 1px solid black;12 ????????????background: #CCC;13 ????????????position: absolute;14 ????????????margin-left: -200px;15 ????????????margin-top: -75px;16 ????????????left: 50%;17 ????????????top: 50%;18 ????????????text-align: center;19 ????????????line-height: 150px;20 ????????}21 ????</style>22 ????<script>23 ????????window.onload = function () {24 ????????????let oBox = document.querySelector(‘.box‘);25 26 ????????????oBox.ondragenter = function () {27 ????????????????oBox.innerHTML = ‘松手上传‘;28 ????????????};29 ????????????oBox.ondragleave = function () {30 ????????????????oBox.innerHTML = ‘请拖到这里‘;31 ????????????};32 33 ????????????oBox.ondragover = function () { ?????//只要鼠标还没松手、并且还没离开，一直不停发生34 ????????????????console.log("aaaa");35 ????????????????// ondragover不阻止默认事件，ondrop不会触发 ?-> ?在这里默认事件是浏览器打开这个文件36 ????????????????return false; ?// 阻止默认事件37 ????????????};38 ????????????oBox.ondrop = function (ev) { ??????// ev是事件对象event39 ????????????????// alert(‘松手‘);40 41 ????????????????let data = new FormData();42 ????????????????Array.from(ev.dataTransfer.files).forEach(file => { ????// dataTransfer是传数据的43 ????????????????????data.append(‘f1‘, file);44 ????????????????});45 46 ????????????????// Ajax:47 ????????????????let oAjax = new XMLHttpRequest();48 49 ????????????????//POST50 ????????????????oAjax.open(‘POST‘, `http://localhost:8080/api`, true);51 ????????????????oAjax.send(data);52 53 ????????????????oAjax.onreadystatechange = function () {54 ????????????????????if (oAjax.readyState === 4) {55 ????????????????????????if (oAjax.status >= 200 && oAjax.status < 300 || oAjax.status === 304) {56 ????????????????????????????alert(‘上传成功‘);57 ????????????????????????} else {58 ????????????????????????????alert(‘上传失败‘);59 ????????????????????????}60 ????????????????????}61 ????????????????};62 63 ????????????????return false;64 ????????????};65 ????????};66 ????</script>67 </head>68 <body>69 <div class="box">70 ????请拖到这里71 </div>72 </body>73 </html>后端(express)：
1 const express = require(‘express‘) ?????????// express主体 2 const body = require(‘body-parser‘) ????????// 接收普通POST数据 3 const multer = require(‘multer‘) ???????????// 接收文件POST数据 4 ?5 // create server: 6 let server = express() 7 server.listen(8080) 8 ?9 // 中间件:10 server.use(body.urlencoded({extended: false}))11 let multerObj = multer({dest: ‘./upload/‘})12 server.use(multerObj.any())13 14 // 处理请求: -> RESTful风格15 server.post(‘/api‘, function (req, res) {16 ????if(req.headers[‘origin‘]===‘null‘ || req.headers[‘origin‘].startsWith(‘http://localhost‘)){ ????// 设置允许跨域17 ????????res.setHeader(‘Access-Control-Allow-Origin‘, ‘*‘);18 ????}19 20 ????res.send("test get")21 22 ????console.log(req.body); ?????// 普通POST数据23 ????console.log(req.files); ????// 文件POST数据24 })25 26 // 设置静态文件路径27 server.use(express.static(‘./www/‘))拖拽上传实现
原文地址：https://www.cnblogs.com/wyb666/p/9740731.html