拖拽上傳及讀取文件實現

時間 2019-11-13

標籤上傳讀取文件實現简体版

原文原文鏈接

1.拖拽上傳相關事件javascript

2.拖拽上傳簡單實現html

3.拖拽上傳完整實現前端

4.讀取文件實現java

1.拖拽上傳相關事件express

相關事件：後端

ondragenter 拖着東西進入
ondragleave 拖着東西離開
ondragover 懸停
ondrop 鬆手

另外有時候須要阻止事件的默認事件發生：api

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>

讀取圖片並選擇上傳效果以下：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。