本文主要介绍new XMLHttpRequest()监听附件上传进度，解决优化loading长时间加载，用户等待问题
一、存在问题

经测试发现，new XMLHttpRequest()在附件上传请求中，WIFI关闭切4G上传，上传进度不会持续；4G不关闭打开WIFI会继续上传，但等待时间过长，实际上是4G在上传，倘若关闭4G网络，上传进度终止。
二、相关代码

2.1 HTML

1. <div class="process-wrapper" id="processWrap">
   
2. <div class="process-face"></div>
   
3. <img class="close-icon" id="closeBtn" src="../../images/close.png" alt="">
   
4. <div class="process">
   
5.   <div class="process-inner" id="processInner" style="width:50%"></div>
   
6.   <div class="process-value">
   
7.    <span>提交中...</span>
   
8.    <span id="process">0%</span>
   
9.   </div>
   
10. </div>
    
11. </div>

复制代码

2.2 CSS样式

1. /* 附件上传进度条 */
   
2. .process-wrapper{
   
3. -moz-user-select:none;
   
4. position: fixed;
   
5. left: 0;
   
6. top: 0;
   
7. bottom: 0;
   
8. right: 0;
   
9. z-index: 10000;
   
10. display: none;
    
11. }
    
12. .process-face{
    
13. width: 100%;
    
14. height: 100%;
    
15. background-color: #000;
    
16. opacity: 0.7;
    
17. position: fixed;
    
18. }
    
19. .close-icon{
    
20. width: 26px;
    
21. height: 26px;
    
22. position: fixed;
    
23. left: 50%;
    
24. top: calc( 50% + 40px );
    
25. transform: translate(-50%,-50%);
    
26. }
    
27. .process{
    
28. width: 90%;
    
29. height: 30px;
    
30. background-color: #fff;
    
31. border-radius: 30px;
    
32. overflow: hidden;
    
33. position: absolute;
    
34. left: 50%;
    
35. top: 50%;
    
36. transform: translate(-50%,-50%);
    
37. text-align: center;
    
38. font-size: 14px;
    
39. line-height: 30px;
    
40. color: #999;
    
41. }
    
42. .process-inner{
    
43. width: 100%;
    
44. height: 30px;
    
45. position: absolute;
    
46. left: 0;
    
47. top: 0;
    
48. background-color: #0079C1;
    
49. transition: 0.1s;
    
50. z-index: -1;
    
51. }

复制代码

2.3 JS

1. (function(app, doc) {
   
2. 
   
3. var $processWrap = document.getElementById("processWrap"),
   
4. $closeBtn = document.getElementById("closeBtn"),
   
5. xhr = new XMLHttpRequest();
   
6. doc.addEventListener('netchange', onNetChange, false);
   
7. function onNetChange() {
   
8.   if ($processWrap.style.display != "none") {
   
9.    $processWrap.style.display = "none";
   
10.    xhr.abort();
    
11.    mui.toast('网络中断请重试');
    
12.   }
    
13. }
    
14. doSend: function() {
    
15.    app.ajaxFile({  //封装好的ajax请求
    
16.    url: "",
    
17.    data: FormData,
    
18.    xhr: xhr,
    
19.    success: function(r) {
    
20.     if (r == '1') {
    
21.      mui.toast("保存成功");
    
22.      // 上传成功逻辑处理
    
23.     } else {
    
24.      $processWrap.style.display = "none";
    
25.      mui.toast(app.netError);
    
26.     }
    
27.    },
    
28.    error: function(r) {
    
29.     $processWrap.style.display = "none";
    
30.    },
    
31.    progress: function(e) {
    
32.     if (e.lengthComputable) {
    
33.      var progressBar = parseInt((e.loaded / e.total) * 100);
    
34.      if (progressBar < 100) {
    
35.       $progress.innerHTML = progressBar + "%";
    
36.       $processInner.style.width = progressBar + "%";
    
37.      }
    
38.     }
    
39.    },
    
40.    timeout:function(){
    
41.     $processWrap.style.display = "none";
    
42.    }
    
43. 
    
44.   });
    
45. })
    
46. mui.plusReady(function() {
    
47.   $closeBtn.addEventListener("tap",function(){
    
48.    setTimeout(function(){
    
49.     $processWrap.style.display = "none";
    
50.     xhr.abort();
    
51.    }, 400);
    
52.   })
    
53. });
    
54. })(app, document);

复制代码

三、app.js封装ajax请求

1. var $ajaxCount = 0;
   
2. 
   
3. window.app = {
   
4. //ajaxFile超时时间
   
5. fileTimeout: 180000,
   
6. ajaxFile: function(option) {
   
7. $ajaxCount++;
   
8. var _ajaxCount = $ajaxCount;
   
9. if (!option.error) {
   
10.   option.error = ajaxError; // 请求失败提示
    
11. }
    
12. if (option.validateUserInfo == undefined) option.validateUserInfo = true;
    
13. var xhr = option.xhr || new XMLHttpRequest();
    
14. xhr.timeout = app.fileTimeout;
    
15. xhr.open('POST', app.getItem(app.localKey.url) + option.url, true);
    
16. xhr.onreadystatechange = function() {
    
17.   if (xhr.readyState == 4 && xhr.status == 200) {
    
18.    var r = xhr.responseText;
    
19.    if (r) {
    
20.     r = JSON.parse(r);
    
21.    }
    
22.    if (_ajaxCount == $ajaxCount) {
    
23.     option.success && option.success(r);
    
24.    }
    
25.   }
    
26. }
    
27. xhr.upload.onprogress = function (e) {
    
28.   option.progress(e);
    
29. }
    
30. xhr.onerror = function(e) {
    
31.   option.error(e); // 添加 上传失败后的回调函数
    
32. }
    
33. xhr.ontimeout = function(e){
    
34.   option.timeout(e);
    
35.   app.closeWaiting();
    
36.   $.toast("请求超时,请重试");
    
37.   xhr.abort();
    
38. 　　}
    
39. xhr.send(option.data);
    
40. },
    
41. }

复制代码

拓展：后端NodeJS实现代码

1. const express = require("express");
   
2. const multer = require("multer");
   
3. const expressStatic = require("express-static");
   
4. const fs = require("fs");
   
5. 
   
6. let server = express();
   
7. let upload = multer({ dest: __dirname+'/uploads/' })
   
8. // 处理提交文件的post请求
   
9. server.post('/upload_file', upload.single('file'), function (req, res, next) {
   
10.   console.log("file信息", req.file);
    
11.   fs.rename(req.file.path, req.file.path+"."+req.file.mimetype.split("/").pop(), ()=>{
    
12.     res.send({status: 1000})
    
13.   })
    
14. })
    
15. 
    
16. // 处理静态目录
    
17. server.use(expressStatic(__dirname+"/www"))
    
18. // 监听服务
    
19. server.listen(8080, function(){
    
20.   console.log("请使用浏览器访问 http://localhost:8080/")
    
21. });

复制代码

到此这篇关于Html5 new XMLHttpRequest()监听附件上传进度的文章就介绍到这了,更多相关Html5 监听附件上传内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

来源：https://www.jb51.net/html5/760763.html
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！