Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "how to monitor attachment upload progress in Html5", so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to monitor attachment upload progress in Html5" article.

I. existing problems

After testing, it is found that in the attachment upload request of new XMLHttpRequest (), the upload progress will not last if WIFI closes the switch to 4G upload; if 4G is not turned off, WIFI will continue to upload, but the waiting time is too long. In fact, 4G is uploading. If the 4G network is closed, the upload progress will be terminated.

II. Related Code 2.1 HTML

Submitting... 0% 2.2 CSS style / * attachment upload progress bar * / .process-wrapper {- moz-user-select:none; position: fixed; left: 0; top: 0; bottom: 0; right: 0; z-index: 10000; display: none;}. Process-face {width: 100%; height: 100%; background-color: # 000; opacity: 0.7; position: fixed;}. Close-icon {width: 26px; height: 26px; position: fixed; left: 50% Top: calc (50% + 40px); transform: translate (- 50% talk 50%);} .process {width: 90%; height: 30px; background-color: # fff; border-radius: 30px; overflow: hidden; position: absolute; left: 50%; top: 50%; transform: translate (- 50% absolute; left 50%); text-align: center; font-size: 14px; line-height: 30px; color: # 999;}. Process-inner {width: 100%; height: 30px; position: absolute; left: 0; top: 0 Background-color: # 0079C1; transition: 0.1s; z-index:-1;} 2.3JS (function (app, doc) {var $processWrap = document.getElementById ("processWrap"), $closeBtn = document.getElementById ("closeBtn"), xhr = new XMLHttpRequest (); doc.addEventListener ('netchange', onNetChange, false); function onNetChange () {if ($processWrap.style.display! = "none") {$processWrap.style.display = "none"; xhr.abort () Mui.toast ('network outage please try again');} doSend: function () {app.ajaxFile ({/ / encapsulated ajax request url: ", data: FormData, xhr: xhr, success: function (r) {if (r = ='1') {mui.toast (" saved successfully "); / / upload success logic processing} else {$processWrap.style.display =" none " Mui.toast (app.netError);}}, error: function (r) {$processWrap.style.display = "none";}, progress: function (e) {if (e.lengthComputable) {var progressBar = parseInt ((e.loaded / e.total) * 100); if (progressBar)

< 100) { $progress[xss_clean] = progressBar + "%"; $processInner.style.width = progressBar + "%"; } } }, timeout:function(){ $processWrap.style.display = "none"; } }); }) mui.plusReady(function() { $closeBtn.addEventListener("tap",function(){ setTimeout(function(){ $processWrap.style.display = "none"; xhr.abort(); }, 400); }) });})(app, document);三、app.js封装ajax请求var $ajaxCount = 0;window.app = { //ajaxFile超时时间 fileTimeout: 180000, ajaxFile: function(option) { $ajaxCount++; var _ajaxCount = $ajaxCount; if (!option.error) { option.error = ajaxError; // 请求失败提示 } if (option.validateUserInfo == undefined) option.validateUserInfo = true; var xhr = option.xhr || new XMLHttpRequest(); xhr.timeout = app.fileTimeout; xhr.open('POST', app.getItem(app.localKey.url) + option.url, true); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { var r = xhr.responseText; if (r) { r = JSON.parse(r); } if (_ajaxCount == $ajaxCount) { option.success && option.success(r); } } } xhr.upload.onprogress = function (e) { option.progress(e); } xhr.onerror = function(e) { option.error(e); // 添加 上传失败后的回调函数 } xhr.ontimeout = function(e){ option.timeout(e); app.closeWaiting(); $.toast("请求超时,请重试"); xhr.abort();　　} xhr.send(option.data);},} 拓展：后端NodeJS实现代码 const express = require("express");const multer = require("multer");const expressStatic = require("express-static");const fs = require("fs");let server = express();let upload = multer({ dest: __dirname+'/uploads/' })// 处理提交文件的post请求server.post('/upload_file', upload.single('file'), function (req, res, next) { console.log("file信息", req.file); fs.rename(req.file.path, req.file.path+"."+req.file.mimetype.split("/").pop(), ()=>

{res.send ({status: 1000})}) / / process static directory server.use (expressStatic (_ dirname+ "/ www")) / / listening service server.listen (8080, function () {console.log ("Please use your browser to access http://localhost:8080/")}); The above is about the content of this article on "how to monitor attachment upload progress in Html5". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more related knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.