html5解决大文件断点续传

一、使用file api对文件“切片”，使用slice 断点续传思路：断点续传最核心的内容就是把文件“切片”然后再一片一片的传给服务器，但是这看似简单的上传过程却有着无数的坑。首先是文件的识别，一个文件被分成了若干份之后如何告诉服务器你切了多少块，以及最终服务器应该如何把你上传上去的文件进行合并，这都是要考虑的。因此在文件开始上传之前，我们和服务器要有一个“握手”的过程，告诉服务器文件信息，然后和服务器约定切片的大小，当和服务器达成共识之后就可以开始后续的文件传输了。前台要把每一块的文件传给后台，成功之后前端和后端都要标识一下，以便后续的断点。当文件传输中断之后用户再次选择文件就可以通过标识来判断文件是否已经上传了一部分，如果是的话，那么我们可以接着上次的进度继续传文件，以达到续传的功能。
文件的前端切片有了HTML5 的 File api之后切割文件比想想的要简单的多的多。只要用slice 方法就可以了

var packet = file.slice(start, end); 参数start是开始切片的位置，end是切片结束的位置单位都是字节。

通过控制start和end 就可以是实现文件的分块如 1. file.slice(0,1000);

file.slice(1000,2000);
file.slice(2000,3000);

二、HTML5 FormData实现文件上传实例表单提交，文件上传是一个常用又十分麻烦的功能，以前要上传文件通常都是借助插件或者 flash来实现，噼里啪啦的加载一大堆东西。自从有了HTML5的FormData后，老板再也不用担心我的上传了。 FormData可以把它理解成一个虚拟的表单对象，它只有一个方法append，这个可以在浏览器console一下就知道了。我们可以通过append向FormData里面添加各种需要提交的数据。你可以先创建一个空的 FormData 对象,然后使用 append() 方法向该对象里添加字段，
如下：

 var oMyForm = new FormData();
oMyForm.append("username", "Groucho");  
oMyForm.append("accountnum", 123456); // 数字123456被立即转换成字符 串"123456"

// fileInputElement中已经包含了用户所选择的文件

oMyForm.append("userfile", fileInputElement.files[0]);
var oReq = new XMLHttpRequest(); 
oReq.open("POST", "http://foo.com/submitform.php");
oReq.send(oMyForm);

FormData对象可以让我们组织一个使用XMLHttpRequest对象发送的键值对的集合。它主要用于发送表单数据,但是可以独立于使用表单传输的数据。使用FormData对象发送文件你也可以直接向FormData对象中添加File或Blob，就像下面这样：

 data.append("myfile", myBlob, "filename.txt");

当使用append() 方法的时候，可能会使用到第三个参数去发送文件名称（通过ContentDisposition头发送到服务器）。如果没有指定第三个参数或这个参数不被支持的话，第三个参数默认是”blob”。

js代码

<!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="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>

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

参考文章：http://blog.ncmem.com/wordpress/2023/10/13/html5%e8%a7%a3%e5%86%b3%e5%a4%a7%e6%96%87%e4%bb%b6%e6%96%ad%e7%82%b9%e7%bb%ad%e4%bc%a0-2/

欢迎入群一起讨论

posted on 2023-10-13 13:52 Xproer-松鼠阅读(46) 评论(0) 编辑收藏举报

刷新页面返回顶部

松鼠的博客

导航