html5批量大文件切割上传,AJAX-----16HTML5实现大文件切割上传(示例代码)

Document

/*我们用到的api有Blob，他的file里面有slice方法可以截取二进制对象的一部分。。

而且我们需要修改php.ini文件，

upload_max_filesize = 20M ---上传文件，单个文件的最大值

post_max_size = 20M post方式最大上传20M*/

functionbfbs(bfb){varpro=document.getElementsByTagName(\'progress\')[0];

pro.style.display= \'block\';

pro.setAttribute(\'value\',bfb);varsd=document.getElementById(\'sd\');

sd.innerHTML=bfb+\'%\';

}varclock= null;

xhr= newXMLHttpRequest();functionupgo(){

clock=window.setInterval(selefile,1000);

}varselefile=(function(){

const LENGTH= 10 * 1024 * 1024;//每次切割10M

varsta= 0;varend=sta+LENGTH;varflag= false;//标识上一块正在上传中...

varblob= null;varfd= null;varxhr= null;varbfb= 0;return(function(){if(flag== true){return;

}varup_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);varfd= newFormData();

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);

});

})();functionup(fd){

xhr.open(\'POST\',\'./14.php\',false);

xhr.send(fd);

}