html 大文件断点续传

Posted 2022-12-11 画个圈圈爱上你

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 大文件断点续传相关的知识，希望对你有一定的参考价值。

js代码 [html] view plain copy

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>xhr2</title>
</head>
<body>
<div id="drop_area" style="border:3px dashed silver;width:200px; height:200px">
将图片拖拽到此
</div>
<progress value="0" max="10" id="prouploadfile"></progress>
<span id="persent">0%</span>
<br />
<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] view plain copy

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

以上是关于html 大文件断点续传的主要内容，如果未能解决你的问题，请参考以下文章

html 大文件 断点续传

html 大文件断点续传