拖拽上传实现

Posted 2021-01-10 wyb666

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了拖拽上传实现相关的知识，希望对你有一定的参考价值。

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是事件对象event
39                 // 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                 //POST
50                 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/‘))

以上是关于拖拽上传实现的主要内容，如果未能解决你的问题，请参考以下文章