2點多接了個電話導致失眠，沒辦法，跑起來接着板磚了。。。。。。
廢話不多說，直接走碼。。。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #jdt{ width:300px; height:25px; } progress{ display:none; width:200px; height:25px; float:left; } #sd{ float:left; } </style> <script> /* 我們用到的api有Blob，他的file里面有slice方法可以截取二進制對象的一部分。。 而且我們需要修改php.ini文件， upload_max_filesize = 20M ---上傳文件，單個文件的最大值 post_max_size = 20M post方式最大上傳20M */ function bfbs(bfb){ var pro = document.getElementsByTagName('progress')[0]; pro.style.display = 'block'; pro.setAttribute('value',bfb); var sd = document.getElementById('sd'); sd.innerHTML = bfb +'%'; } var clock = null; xhr = new XMLHttpRequest(); function upgo(){ clock = window.setInterval(selefile,1000); } var selefile = (function(){ const LENGTH = 10 * 1024 * 1024; //每次切割10M var sta = 0; var end = sta + LENGTH; var flag = false; //標識上一塊正在上傳中... var blob = null; var fd = null; var xhr = null; var bfb = 0; return (function(){ if(flag == true){ return; } var up_file = document.getElementsByTagName('input')[0].files[0]; //如果sta大於up_file.size那么就結束咯 if(sta > up_file.size){ clearInterval(clock); return false; } blob = up_file.slice(sta,end); var fd = new FormData(); fd.append('part',blob); //請求后端 up(fd); sta = end; end = sta + LENGTH; flag = false; //進隊條 bfb = Math.ceil(100 * end / up_file.size); bfb > 100 ? bfb = 100 : bfb = bfb; bfbs(bfb); }); })(); function up(fd){ xhr.open('POST','./14.php',false); xhr.send(fd); } </script> </head> <body> <div id="jdt"><progress max="100" value=""></progress><span id="sd"><span></div> <input type="file" name="part" onchange="upgo();" > <div id="desc"></div> </body> </html>
這里為了實現兼容谷歌沒辦法，只能使用閉包方法來寫了。。。。。。
效果如下所示。。。
經測試火狐的效果本人感覺比谷歌的酷，嘻嘻。。。
