一、进度条的原理
新知识点：Html5中FormData，xmlHttpRequest中的upload属性，progress事件监控
xmlHttpRequest中的upload属性，实现：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src="js/jquery-1.9.1.js"></script> 7 8 </head> 9 <body> 10 <form action="#" id="form" method="post" enctype="multipart/form-data"> 11 <input type="text" name="password"><br> 12 <input type="file" id="file" name="apk_file" class="file"><br> 13 </form> 14 <input type="button" value="ajax" id="ajax"> 15 16 </body> 17 <script> 18 window.onload=function(){ 19 20 document.getElementById('ajax').addEventListener('click',function(){ 21 22 var formElement = document.getElementById("form"); 23 var xhr=getXhr(); 24 console.log(xhr.progress,xhr.upload) 25 var data=new FormData(formElement) 26 // 27 // console.log(xhr.progress,xhr.upload) 28 // 判断浏览器是否有xhr.upload属性 29 if (xhr.upload) { 30 //开始 31 xhr.upload.onloadstart =function(e){ 32 console.log(e,'start开始') 33 } 34 35 //发送 36 xhr.upload.onprogress = function (e) { 37 var done = e.position || e.loaded, total = e.totalSize || e.total; 38 console.log('xhr.upload.onprogress: ' + done + ' / ' + total + ' = ' + (Math.floor(done / total * 1000) / 10) + '%,onprogress. '); 39 }; 40 41 42 43 //结束 事件 loadend：在通信完成或者触发error、abort或load事件后触发。 4种 不同的事件 44 //成功返回调用方法 45 xhr.upload.onload =function(e){ 46 console.log('onloadend') 47 } 48 //错误返回调用方法 49 xhr.upload.onerror =function(e){ 50 console.log('onerror') 51 } 52 53 xhr.upload.onloadend =function(e){ 54 console.log('onloadendend') 55 } 56 57 //发送完成 请求状态监控 58 xhr.onreadystatechange = function (e) { 59 if (4 == this.readyState) { 60 console.log('xhr upload complete',e,'onreadystatechange状态为4的时候'); 61 } 62 }; 63 } 64 xhr.open("POST", "01.php"); 65 xhr.send(data); 66 }) 67 } 68 69 // 定义创建XMLHttpRequest对象的函数 70 function getXhr(){ 71 // 声明XMLHttpRequest对象 72 var xhr; 73 // 根据不同浏览器创建 74 if(window.XMLHttpRequest){ 75 // 其他浏览器 76 xhr = new XMLHttpRequest(); 77 }else{ 78 // IE浏览器(8及之前) 79 xhr = new ActiveXObject("Microsoft.XMLHttp"); 80 } 81 // 返回XMLHttpRequest对象 82 return xhr; 83 } 84 </script> 85 </html> 86
xmlhtmlrequest.upload属性下面的方法有： 来源
| Event listeners | Data type of response property |
onloadstart |
The fetch starts |
onprogress |
Data transfer is going on |
onabort |
The fetch operation was aborted |
onerror |
The fetch failed |
onload |
The fetch succeeded |
ontimeout |
The fetch operation didn't complete by the timeout the author specified |
onloadend |
The fetch operation completed (either success or failure) |
通过progress事件，实现：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src="js/jquery-1.9.1.js"></script> 7 8 </head> 9 <body> 10 <form action="#" id="form" method="post" enctype="multipart/form-data"> 11 <input type="text" name="password"><br> 12 <input type="file" id="file" name="apk_file" class="file"><br> 13 </form> 14 <input type="button" value="ajax" id="ajax"> 15 16 </body> 17 <script> 18 19 20 document.getElementById('file').addEventListener('change', function (e) { 21 var xhr = getXhr(); 22 // 通过formData 获得参数 this.File 23 var data=new FormData(document.getElementById("form")) 24 // 监控 progress事件 25 xhr.addEventListener('progress', function (e) { 26 var done = e.position || e.loaded, total = e.totalSize || e.total; 27 console.log('xhr progress: ' + (Math.floor(done / total * 1000) / 10) + '%'); 28 }, false); 29 30 xhr.onreadystatechange = function (e) { 31 if (4 == this.readyState) { 32 console.log(['xhr upload complete', e]); 33 } 34 }; 35 xhr.open('post', '01.php', true);///这里写上url~ 36 xhr.send(data); 37 }, false); 38 39 function getXhr(){ 40 // 声明XMLHttpRequest对象 41 var xhr; 42 // 根据不同浏览器创建 43 if(window.XMLHttpRequest){ 44 // 其他浏览器 45 xhr = new XMLHttpRequest(); 46 }else{ 47 // IE浏览器(8及之前) 48 xhr = new ActiveXObject("Microsoft.XMLHttp"); 49 } 50 // 返回XMLHttpRequest对象 51 return xhr; 52 } 53 </script> 54 </html>
https://developer.mozilla.org/zh-CN/docs/Web/Events/%E8%BF%9B%E5%BA%A6%E6%9D%A1
| Property | Type | Description |
|---|---|---|
target 只读 |
EventTarget |
The event target (the topmost target in the DOM tree). |
type 只读 |
DOMString |
The type of event. |
bubbles 只读 |
Boolean |
Whether the event normally bubbles or not |
cancelable 只读 |
Boolean |
Whether the event is cancellable or not? |
lengthComputable |
boolean | Specifies whether or not the total size of the transfer is known. Read only. |
loaded |
unsigned long (long) | The number of bytes transferred since the beginning of the operation. This doesn't include headers and other overhead, but only the content itself. Read only. |
total |
unsigned long (long) | The total number of bytes of content that will be transferred during the operation. If the total size is unknown, this value is zero. Read only. |