簡述三種異步上傳文件方式

時間 2019-11-12

標籤簡述三種異步上傳文件方式简体版

原文原文鏈接

　　好久沒寫過博客了！javascript

　　上次寫已是去年的12月了，離如今也有足足三個月了。這幾個月由於要搭建我的網站以及準備我的簡歷，包括最近要準備最近的各大公司的實習春招，很難抽時間來寫博客，此次的異步文件上傳我以爲是頗有必要了解的，籠絡了不少知識點，所以準備寫一篇博客來鞏固下。html

　　異步上傳文件是爲了更好的用戶體驗，是每一個前端必須掌握的技能。這裏我提出三點有關異步文件上傳的方式。前端

　　　　使用第三方控件，如Flash,ActiveX等瀏覽器插件上傳。java

　　　　使用隱藏的iframe模擬異步上傳。node

　　　　使用XMLHttpRequest2來實現異步上傳。jquery

　　第一種使用瀏覽器插件上傳，須要必定的底層編碼功底，在這裏我就不講了，以避免誤人子弟，提出這點你們能夠自行百度。
ajax

　　第二種使用隱藏的iframe模擬異步上傳。爲何在這裏說的是模擬呢?由於咱們實際上是將返回結果放在了一個隱藏的iframe中，因此纔沒有使當前頁面跳轉，感受就像是異步操做同樣。瀏覽器

　　先貼出代碼:服務器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>隱藏的iframe上傳文件</title>
 6     <script type="text/javascript" src="jquery路徑..."></script>
 7 </head>
 8 <body>
 9     <iframe name="frm" style="display:none"></iframe>
10     <form action="/upload2" enctype="multipart/form-data" method="post" target="frm" onsubmit="loading(true);">
11         <p id="upfile">附件： <input type="file" name="myfile" style="display: inline"></p>
12         <p id="upbtn"><input style="padding-left:50px;padding-right: 50px;" type="submit" value="異步上傳">
13             <span id="uptxt" style="display: none">正在上傳...</span></p>
14     </form>
15     <div id="flist" style="border:1px dotted darkgray;"></div>
16 <script>
17     // 上傳完成後的回調
18     function uploadFinished(fileName) {
19         addToFlist(fileName);
20         loading(false);
21     }
22     
23     function addToFlist(fname) {
24         var temp = ["<p id='" + fname + "'>",
25                     fname,
26             "<button onclick='delFile(\"" + fname + "\");'>刪除</button>",
27                     "</p>"
28                     ];
29         $("#flist").append(temp.join(""));
30     }
31 
32     function loading(showloading) {
33         if (showloading) {
34             $("#uptxt").show();
35         } else {
36             $("#uptxt").hide();
37         }
38     }
39 </script>
40 </body>
41 </html>

View Code

　　這種技術有兩個關鍵的地方:app

　　　　1.form會指定target,提交的結果定向返回到隱藏的ifram中。(即form的target與iframe的name屬性一致)。

　　　　2.提交完成後，iframe中頁面與主頁面通訊，通知上傳結果及服務端文件信息

　　如何與主頁面通訊呢?

　　咱們用nodejs在接收完了文件後返回了一個window.parent.主頁面定義的方法，執行後能夠得知文件上傳完成。代碼很簡單:

 1 router.post('/upload2', multipartMiddleware, function(req, res) {
 2     var fpath = req.files.myfile.path;
 3     var fname = fpath.substr(fpath.lastIndexOf('\\') + 1);
 4     setTimeout(function() {
 5         var ret = ["<script>",
 6             "window.parent.uploadFinished('" + fname + "');",
 7             "</script>"];
 8         res.send(ret.join(""));
 9     }, 3000);
10 
11 });

View Code

　　執行後能夠打開開發人員選項，你會發現隱藏iframe中返回了服務器的一些數據。

　　第三種使用XMLHttpRequest2來進行真正的異步上傳。

　　仍是先貼出代碼:

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>xhr level2 異步上傳</title>
  6     <script type="text/javascript" src="jquery路徑..."></script>
  7 </head>
  8 <body>
  9     <div>
 10         <p id="upfile">附件： <input type="file" id="myfile" style="display: inline"></p>
 11         <p id="upbtn">
 12             <input style="padding-left:50px;padding-right: 50px;" type="button" value="異步上傳" onclick="upload();">
 13             <span id="uptxt" style="display: none">正在上傳...</span>
 14             <span id="upprog"></span>
 15             <button id="stopbtn" style="display:none;">中止上傳</button>
 16         </p>
 17     </div>
 18 
 19     <div id="flist" style="border:1px dotted darkgray;"></div>
 20 
 21 <script>
 22     function upload() {
 23         // 1.準備FormData
 24         var fd = new FormData();
 25         fd.append("myfile", $("#myfile")[0].files[0]);
 26 
 27         // 建立xhr對象
 28         var xhr = new XMLHttpRequest();
 29 
 30 
 31         // 監聽狀態，實時響應
 32         // xhr 和 xhr.upload 都有progress事件，xhr.progress是下載進度，xhr.upload.progress是上傳進度
 33         xhr.upload.onprogress = function(event) {
 34             if (event.lengthComputable) {
 35                 var percent = Math.round(event.loaded * 100 / event.total);
 36                 console.log('%d%', percent);
 37                 $("#upprog").text(percent);
 38             }
 39         };
 40 
 41         // 傳輸開始事件
 42         xhr.onloadstart = function(event) {
 43             console.log('load start');
 44             $("#upprog").text('開始上傳');
 45 
 46             $("#stopbtn").one('click', function() {
 47                xhr.abort();
 48                 $(this).hide();
 49             });
 50 
 51             loading(true);
 52         };
 53 
 54         // ajax過程成功完成事件
 55         xhr.onload = function(event) {
 56             console.log('load success');
 57             $("#upprog").text('上傳成功');
 58 
 59             console.log(xhr.responseText);
 60             var ret = JSON.parse(xhr.responseText);
 61             addToFlist(ret.fname);
 62         };
 63 
 64         // ajax過程發生錯誤事件
 65         xhr.onerror = function(event) {
 66             console.log('error');
 67             $("#upprog").text('發生錯誤');
 68         };
 69 
 70         // ajax被取消
 71         xhr.onabort = function(event) {
 72             console.log('abort');
 73             $("#upprog").text('操做被取消');
 74         };
 75 
 76         // loadend傳輸結束，無論成功失敗都會被觸發
 77         xhr.onloadend = function (event) {
 78             console.log('load end');
 79             loading(false);
 80         };
 81 
 82         // 發起ajax請求傳送數據
 83         xhr.open('POST', '/upload3', true);
 84         xhr.send(fd);
 85     }
 86 
 87     
 88     function addToFlist(fname) {
 89         var temp = ["<p id='" + fname + "'>",
 90                     fname,
 91             "<button onclick='delFile(\"" + fname + "\");'>刪除</button>",
 92                     "</p>"
 93                     ];
 94         $("#flist").append(temp.join(""));
 95     }
 96 
 97     function delFile(fname) {
 98         console.log('to delete file: ' + fname);
 99         // TODO: 請實現
100     }
101 
102     function loading(showloading) {
103         if (showloading) {
104             $("#uptxt").show();
105             $("#stopbtn").show();
106         } else {
107             $("#uptxt").hide();
108             $("#stopbtn").hide();
109         }
110     }
111 </script>
112 </body>
113 </html>