断点续传

html 代码

<!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>
</html>

<!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>< /html>

js 代码

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

posted @ 2018-08-10 15:58 阿拉神苗阅读(252) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

水瓶鲸鱼

头发换来的代码

断点续传

公告