php+html5实现无刷新上传、大文件分片上传、断点续传的方法
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
php+html5实现无刷新上传、大文件分片上传、断点续传的方法理清思路:
引入了两个概念:块(block)和片(chunk)。每个块由一到多个片组成,而一个资源则由一到多个块组成。
块是服务端的永久数据存储单位,片则只在分片上传过程中作为临时存储的单位。服务端会以约一个月为单位周期性的清除上传后未被合并为块的数据片。实现过程:
将文件分割,分片上传,然后合并。
前端代码:
content="width=device-width,user-scalable=no,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0">
#progress{
width:300px;
height:20px;
background-color:#f7f7f7;
box-shadow:inset01px2px rgba(0,0,0,0.1);
border-radius:4px;
background-image:linear-gradient(to bottom,#f5f5f5,#f9f9f9);
}
#finish{
background-color:#149bdf;
background-image:linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent25%,transparent50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15)75%,transparent75%,transparent); background-size:40px40px;
display:inline-block;
height:20px;
}
form{
margin-top:50px;
}
var fileForm=document.getElementById("file"); var stopBtn=document.getElementById('stop'); var upload=new Upload();
fileForm.onchange=function(){
upload.addFileAndSend(this);
}
stopBtn.onclick=function(){
this.value="停止中";
upload.stop();
this.value="已停止";
}
function Upload(){
var xhr=new XMLHttpRequest();
var form_data=new FormData();
const LENGTH=1024*1024;
var start=0;
var end=start+LENGTH;
var blob;
var blob_num=1;
var is_stop=0
//对外方法,传入文件对象
this.addFileAndSend=function(that){ var file=that.files[0];
blob=cutFile(file);
sendFile(blob,file);
blob_num+=1;
}
//停止文件上传
this.stop=function(){
xhr.abort();
is_stop=1;
}
//切割文件
function cutFile(file){
var file_blob=file.slice(start,end); start=end;
end=start+LENGTH;
return file_blob;
};
//发送文件
function sendFile(blob,file){
var form_data=new FormData();
var total_blob_num=Math.ceil(file.size/LENGTH);
form_data.append('file',blob);
form_data.append('blob_num',blob_num);
form_data.append('total_blob_num',total_blob_num);
form_data.append('file_name',);
xhr.open('POST','./statics/style/index.php',false);
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200)
{
console.log(xhr.responseText);
}
var progress;
var progressObj=document.getElementById('finish');
if(total_blob_num==1){
progress='100%';
}else{
progress=Math.min(100,(blob_num/total_blob_num)*100)+'%'; console.log(progress);