拖拽上传及读取文件实现

1.拖拽上传相关事件

2.拖拽上传简单实现

3.拖拽上传完整实现

4.读取文件实现

1.拖拽上传相关事件

相关事件：

ondragenter 拖着东西进入
ondragleave 拖着东西离开
ondragover 悬停
ondrop 松手

另外有时候需要阻止事件的默认事件发生：

1 // 以下是不同DOM绑定方法的阻止默认事件的方法
2 oForm.onsubmit=function (){
3   return false;
4 };
5 
6 oForm.addEventListener('submit', function (ev){
7   ev.preventDefault();
8 }, false);

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/'))

3.拖拽上传完整实现

相比较前面的简单实现，完整实现加了进度条，另外绑定事件全部使用了DOM3事件中的addEventListener

后端代码同基本实现，前端代码如下：

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8">
  5     <title>文件拖拽</title>
  6     <style media="screen">
  7         .box {
  8             width: 400px;
  9             height: 150px;
 10             border: 1px solid black;
 11             background: #CCC;
 12             position: absolute;
 13             margin-left: -200px;
 14             margin-top: -75px;
 15             left: 50%;
 16             top: 50%;
 17             text-align: center;
 18             line-height: 150px;
 19             display: none;
 20         }
 21         .progress{
 22             width: 99%;
 23             margin: 0 auto;
 24         }
 25         .parent {
 26             width: 500px;
 27             height: 20px;
 28             margin: 0 auto;
 29             border: 1px solid black;
 30         }
 31         .child {
 32             width: 0;
 33             height: 100%;
 34             background: green;
 35         }
 36     </style>
 37     <script>
 38         window.onload = function () {
 39             let oBox = document.querySelector('.box');
 40             let timer
 41 
 42             document.addEventListener('dragover', function (ev) {
 43                 clearTimeout(timer)
 44                 oBox.style.display = "block"
 45                 timer = setTimeout(function () {
 46                     oBox.style.display = "none"
 47                 }, 300)
 48 
 49                 ev.preventDefault()
 50             }, false)
 51 
 52             oBox.addEventListener('dragenter', function () {
 53                 oBox.innerHTML = '松手上传'
 54             }, false)
 55             oBox.addEventListener('dragleave', function () {
 56                 oBox.innerHTML = '请把文件拖到这';
 57             }, false)
 58 
 59             oBox.addEventListener('drop', function (ev) {       // ev是事件对象event
 60                 // alert('松手');
 61 
 62                 let data = new FormData();
 63                 Array.from(ev.dataTransfer.files).forEach(file => {     // dataTransfer是传数据的
 64                     data.append('f1', file);
 65                 });
 66 
 67                 // Ajax:
 68                 let oAjax = new XMLHttpRequest();
 69 
 70                 oAjax.upload.addEventListener('progress', function (ev) {
 71                     // 计算进度
 72                     let v = 100 * ev.loaded / ev.total + '%'
 73                     let oChild = document.getElementsByClassName('child')[0];
 74 
 75                     // 设置进度
 76                     oChild.style.width = v;
 77 
 78                     ev.preventDefault()
 79                 }, false)
 80 
 81                 //POST
 82                 oAjax.open('POST', `http://localhost:8080/api`, true);
 83                 oAjax.send(data);
 84 
 85                 ev.preventDefault()
 86             }, false)
 87         };
 88     </script>
 89 </head>
 90 <body>
 91     <div class="progress">
 92         <div class="parent">
 93             <div class="child">
 94 
 95             </div>
 96         </div>
 97     </div>
 98     <div class="box">
 99         请把文件拖到这
100     </div>
101 </body>
102 </html>

4.读取文件实现

使用FileReader实现读取文件：

基本用法：

 1 FileReader用法：
 2 let reader=new FileReader();
 3 
 4 reader.onload=function (){
 5   reader.result
 6 };
 7 
 8 reader.readAsXXX
 9 
10 
11 readAsText              文本
12 readAsDataURL           图片(以及其他二进制数据)
13 readAsBinaryString      以字符串形式存储的二进制数据
14 readAsArrayBuffer       以二进制数据的形式存储数据
15 
16 补充 - base64:
17 base64：可以把二进制数据表现成字符串
18 传输数据时可以直接用二进制，也可以用base64
19 另外只要能出现地址(src)的地方，都能用Base64
20 
21 base64的小应用——小图标不要引用地址，直接放个base64——优化网络性能
22 缺点：
23     1.维护麻烦
24     2.base64编码会把文件体积变大

代码 - 读取文本文件：

 1 <!-- author: wyb -->
 2 <!DOCTYPE html>
 3 <html>
 4 <head>
 5     <meta charset="utf-8">
 6     <title>读取文件内容</title>
 7     <style media="screen">
 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             display: none;
21         }
22     </style>
23     <script>
24         window.onload = function () {
25             let oBox = document.querySelector('.box');
26             let timer
27 
28             document.addEventListener('dragover', function (ev) {
29                 clearTimeout(timer)
30                 oBox.style.display = "block"
31                 timer = setTimeout(function () {
32                     oBox.style.display = "none"
33                 }, 300)
34 
35                 ev.preventDefault()
36             }, false)
37 
38             oBox.addEventListener('dragenter', function () {
39                 oBox.innerHTML = '请松手'
40             }, false)
41             oBox.addEventListener('dragleave', function () {
42                 oBox.innerHTML = '请把要读取的文件拖到这';
43             }, false)
44 
45             oBox.addEventListener('drop', function (ev) {       // ev是事件对象event
46                 let file = ev.dataTransfer.files[0]
47 
48                 // 读取文件 -> FileReader
49                 let reader = new FileReader()
50                 reader.onload = function (ev) {
51                     // alert(reader.result)
52                     document.write(reader.result)   // 直接将上传文件的内容(文本)写到页面中
53                 }
54                 reader.readAsText(file)
55 
56                 ev.preventDefault()
57             }, false)
58         };
59     </script>
60 </head>
61 <body>
62 
63 <div class="box">
64     请把要读取的文件拖到这
65 </div>
66 
67 </body>
68 </html>

代码 - 读取图片并选择上传：

  1 <!-- author: wyb -->
  2 <!DOCTYPE html>
  3 <html>
  4 <head>
  5     <meta charset="utf-8">
  6     <title>读取文件内容2</title>
  7     <style media="screen">
  8         * {margin:0; padding:0; list-style: none}
  9         .box {
 10             width: 400px; height: 150px; border: 1px solid black; background: #CCC;
 11             position: absolute; margin-left: -200px; margin-top: -75px; left: 50%; top: 50%;
 12             text-align: center; line-height: 150px; display: none;
 13         }
 14         .img-list{
 15             overflow: hidden;
 16         }
 17         .img-list li{
 18             float: left; width: 200px; height: 200px; border: 3px solid #666; position:relative; margin: 13px;
 19         }
 20         .img-list li img{
 21             width: 100%; height: 100%;
 22         }
 23         .img-list li .del-btn{
 24             position: absolute; right: 0; top: 0; display: inline;
 25         }
 26     </style>
 27     <script>
 28         window.onload = function () {
 29             let oBox = document.querySelector('.box');
 30             let oUl = document.querySelector('.img-list')
 31             let timer
 32 
 33             document.addEventListener('dragover', function (ev) {
 34                 clearTimeout(timer)
 35                 oBox.style.display = "block"
 36                 timer = setTimeout(function () {
 37                     oBox.style.display = "none"
 38                 }, 300)
 39 
 40                 ev.preventDefault()
 41             }, false)
 42 
 43             oBox.addEventListener('dragenter', function () {
 44                 oBox.innerHTML = '请松手'
 45             }, false)
 46             oBox.addEventListener('dragleave', function () {
 47                 oBox.innerHTML = '请把要读取并上传的图片拖到这';
 48             }, false)
 49 
 50             oBox.addEventListener('drop', function (ev) {       // ev是事件对象event
 51                 // 将上传的图片插入页面中
 52                 Array.from(ev.dataTransfer.files).forEach(function (file) {
 53                     // 确保上传的文件是图片
 54                     if(!file.type.startsWith('image/')){
 55                         return;
 56                     }
 57 
 58                     let reader = new FileReader()
 59                     
 60                     reader.onload = function () {
 61                         let oLi = document.createElement('li')
 62                         oLi.file = file
 63                         oLi.innerHTML = '<img src="" alt=""><a href="javascript:;" class="del-btn">删除</a>'
 64 
 65                         // 给图片标签加上src
 66                         let oImg = oLi.children[0]
 67                         oImg.src = this.result
 68 
 69                         // 删除图片
 70                         let oBtnDel = oLi.children[1]
 71                         oBtnDel.onclick = function () {
 72                             oUl.removeChild(oLi)
 73                         }
 74                         oUl.appendChild(oLi)
 75                     }
 76                     reader.readAsDataURL(file)
 77                 })
 78 
 79                 ev.preventDefault()
 80             }, false)
 81 
 82             // 上传
 83             let oBtnUpload = document.querySelector('#btn_upload')
 84             oBtnUpload.onclick = function () {
 85                 let data = new FormData
 86 
 87                 Array.from(oUl.children).forEach(function (li) {
 88                     data.append('f1', li.file)
 89                     // console.log(li.file)
 90                 })
 91 
 92                 // Ajax
 93                 let oAjax=new XMLHttpRequest();
 94 
 95                 // POST:
 96                 oAjax.open('POST', `http://localhost:8080/api`, true);
 97                 oAjax.send(data);
 98 
 99                 oAjax.onreadystatechange=function (){
100                     if(oAjax.readyState===4){
101                         if(oAjax.status>=200 && oAjax.status<300 || oAjax.status===304){
102                             alert('成功');
103                         }else{
104                             alert('失败');
105                         }
106                     }
107                 };
108 
109             };
110         };
111     </script>
112 </head>
113 <body>
114 
115 <ul class="img-list"></ul>
116 <input type="button" name="" value="上传" id="btn_upload">
117 <div class="box">
118     请把要读取并上传的图片拖到这
119 </div>
120 
121 </body>
122 </html>

读取图片并选择上传效果如下：