html5解决大文件断点续传

最新推荐文章于 2024-07-16 12:34:28 发布

zph同学

最新推荐文章于 2024-07-16 12:34:28 发布

阅读量9k

点赞数 1

分类专栏： javacsript语言 js and php文件上传 php语言

本文链接：https://blog.csdn.net/zph1234/article/details/50577885

版权

php语言同时被 3 个专栏收录

13 篇文章 0 订阅

订阅专栏

javacsript语言

6 篇文章 0 订阅

订阅专栏

js and php文件上传

2 篇文章 0 订阅

订阅专栏

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 οnclick="xhr2()">ajax上传</button>-->	
		<button οnclick="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);
}
	
	
?>

zph同学

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
html5解决大文件断点续传

js代码 xhr2 将图片拖拽到此 0% ajax上传--> 上传 //拖拽上传开始 //-1.禁止浏览器打开文件行为 document.addEventListener("drop",function(e){ //拖离 e.preventDefault(); }) doc
复制链接

扫一扫

专栏目录