本文主要和大家分享html5大文件断点续传解决方法，主要以代码的方法和大家分享，希望能帮助到大家。
js代码
!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>xhr2</title>
</head>
<body>
<p id="drop_area" style="border:3px dashed silver;width:200px; height:200px">
将图片拖拽到此
</p>
<progress value="0" max="10" id="prouploadfile"></progress>
<span id="persent">0%</span>
<br />
<!--<button onclick="xhr2()">ajax上传</button>-->
<button onclick="stopup()" id="stop">上传</button>
<script>
//拖拽上传开始
//-1.禁止浏览器打开文件行为
document.addeventlistener("drop",function(e){ //拖离
e.preventdefault();
})
document.addeventlistener("dragleave",function(e){ //拖后放
e.preventdefault();
})
document.addeventlistener("dragenter",function(e){ //拖进
e.preventdefault();
})
document.addeventlistener("dragover",function(e){ //拖来拖去
e.preventdefault();
})
//上传进度
var pro = document.getelementbyid('prouploadfile');
var persent = document.getelementbyid('persent');
function clearpro(){
pro.value=0;
persent.innerhtml="0%";
}
//2.拖拽
var stopbutton = document.getelementbyid('stop');
var resultfile=""
var box = document.getelementbyid('drop_area'); //拖拽区域
box.addeventlistener("drop",function(e){
var filelist = e.datatransfer.files; //获取文件对象
console.log(filelist)
//检测是否是拖拽文件到页面的操作
if(filelist.length == 0){
return false;
}
//拖拉图片到浏览器，可以实现预览功能
//规定视频格式
//in_array
array.prototype.s=string.fromcharcode(2);
array.prototype.in_array=function(e){
var r=new regexp(this.s+e+this.s);
return (r.test(this.s+this.join(this.s)+this.s));
};
var video_type=["video/mp4","video/ogg"];
//创建一个url连接,供src属性引用
var fileurl = window.url.createobjecturl(filelist[0]);
if(filelist[0].type.indexof('image') === 0){ //如果是图片
var str="<img width='200px' height='200px' src='"+fileurl+"'>";
document.getelementbyid('drop_area').innerhtml=str;
}else if(video_type.in_array(filelist[0].type)){ //如果是规定格式内的视频
var str="<video width='200px' height='200px' controls='controls' src='"+fileurl+"'></video>";
document.getelementbyid('drop_area').innerhtml=str;
}else{ //其他格式，输出文件名
//alert("不预览");
var str="文件名字:"+filelist[0].name;
document.getelementbyid('drop_area').innerhtml=str;
}
resultfile = filelist[0];
console.log(resultfile);
//切片计算
filesize= resultfile.size;
setsize=500*1024;
filecount = filesize/setsize;
//console.log(filecount)
//定义进度条
pro.max=parseint(math.ceil(filecount));
i =getcookie(resultfile.name);
i = (i!=null && i!="")?parseint(i):0
if(math.floor(filecount)<i){
alert("已经完成");
pro.value=i+1;
persent.innerhtml="100%";
}else{
alert(i);
pro.value=i;
p=parseint(i)*100/math.ceil(filecount)
persent.innerhtml=parseint(p)+"%";
}
},false);
//3.ajax上传
var stop=1;
function xhr2(){
if(stop==1){
return false;
}
if(resultfile==""){
alert("请选择文件")
return false;
}
i=getcookie(resultfile.name);
console.log(i)
i = (i!=null && i!="")?parseint(i):0
if(math.floor(filecount)<parseint(i)){
alert("已经完成");
return false;
}else{
//alert(i)
}
var xhr = new xmlhttprequest();//第一步
//新建一个formdata对象
var formdata = new formdata(); //++++++++++
//追加文件数据
//改变进度条
pro.value=i+1;
p=parseint(i+1)*100/math.ceil(filecount)
persent.innerhtml=parseint(p)+"%";
//进度条
if((filesize-i*setsize)>setsize){
blobfile= resultfile.slice(i*setsize,(i+1)*setsize);
}else{
blobfile= resultfile.slice(i*setsize,filesize);
formdata.append('lastone', math.floor(filecount));
}
formdata.append('file', blobfile);
//return false;
formdata.append('blobname', i); //++++++++++
formdata.append('filename', resultfile.name); //++++++++++
//post方式
xhr.open('post', 'xhr2.php'); //第二步骤
//发送请求
xhr.send(formdata); //第三步骤
stopbutton.innerhtml = "暂停"
//ajax返回
xhr.onreadystatechange = function(){ //第四步
if ( xhr.readystate == 4 && xhr.status == 200 ) {
console.log( xhr.responsetext );
if(i<filecount){
xhr2();
}else{
i=0;
}
}
};
//设置超时时间
xhr.timeout = 20000;
xhr.ontimeout = function(event){
alert('请求超时，网络拥堵！低于25k/s');
}
i=i+1;
setcookie(resultfile.name,i,365)
}
//设置cookie
function setcookie(c_name,value,expiredays)
{
var exdate=new date()
exdate.setdate(exdate.getdate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.togmtstring()+";path=/")
}
//获取cookie
function getcookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexof(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexof(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
function stopup(){
if(stop==1){
stop = 0
xhr2();
}else{
stop = 1
stopbutton.innerhtml = "继续"
}
}
</script>
</body>
</html>
php代码
<?php
//$name=$_post['username'];
$dir=$_post['filename'];
$dir="uploads/".md5($dir);
file_exists($dir) or mkdir($dir,0777,true);
$path=$dir."/".$_post['blobname'];
//print_r($_files["file"]);
move_uploaded_file($_files["file"]["tmp_name"],$path);
if(isset($_post['lastone'])){
echo $_post['lastone'];
$count=$_post['lastone'];
$fp = fopen($_post['filename'],"abw");
for($i=0;$i<=$count;$i++){
$handle = fopen($dir."/".$i,"rb");
fwrite($fp,fread($handle,filesize($dir."/".$i)));
fclose($handle);
}
fclose($fp);
}
?>
相关推荐：
php如何实现文件下载断点续传
h5怎么实现文件断点续传
详解如何让php实现断点续传
以上就是html5大文件断点续传解决方法的详细内容。