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>
这里为了实现兼容谷歌没办法，只能使用闭包方法来写了。。。。。。
效果如下所示。。。
经测试火狐的效果本人感觉比谷歌的酷，嘻嘻。。。
