html5解决大文件断点续传

js代码

[html] view plain copy

1. nbsp;html>  
2. html>  
3.     head>  
4.         meta charset="UTF-8"/>  
5.         title>xhr2title>  
6.     head>  
7.     body>  
8.         div  id="drop_area" style="border:3px dashed silver;width:200px; height:200px">  
9.             将图片拖拽到此  
10.         div>  
11.           
12.         progress value="0" max="10" id="prouploadfile">progress>  
13.           
14.         span id="persent">0%span>  
15.         br />  
16.              
17.         button onclick="stopup()" id="stop">上传button>      
18.         script>  
19.         //拖拽上传开始  
20.         //-1.禁止浏览器打开文件行为  
21.         document.addEventListener("drop",function(e){  //拖离   
22.             e.preventDefault();      
23.         })  
24.         document.addEventListener("dragleave",function(e){  //拖后放   
25.             e.preventDefault();      
26.         })  
27.         document.addEventListener("dragenter",function(e){  //拖进  
28.             e.preventDefault();      
29.         })  
30.         document.addEventListener("dragover",function(e){  //拖来拖去    
31.             e.preventDefault();      
32.         })  
33.         //上传进度  
34.         var pro = document.getElementById('prouploadfile');  
35.         var persent = document.getElementById('persent');  
36.         function clearpro(){  
37.             pro.value=0;  
38.             persent.innerHTML="0%";  
39.         }  
40.           
41.         //2.拖拽  
42.         var stopbutton = document.getElementById('stop');  
43.           
44.         var resultfile=""  
45.         var box = document.getElementById('drop_area'); //拖拽区域     
46.         box.addEventListener("drop",function(e){           
47.             var fileList = e.dataTransfer.files; //获取文件对象    
48.             console.log(fileList)  
49.             //检测是否是拖拽文件到页面的操作            
50.             if(fileList.length == 0){                
51.                 return false;            
52.             }             
53.             //拖拉图片到浏览器，可以实现预览功能    
54.             //规定视频格式  
55.             //in_array  
56.             Array.prototype.S=String.fromCharCode(2);  
57.             Array.prototype.in_array=function(e){  
58.                 var r=new RegExp(this.S+e+this.S);  
59.                 return (r.test(this.S+this.join(this.S)+this.S));  
60.             };  
61.             var video_type=["video/mp4","video/ogg"];  
62.               
63.             //创建一个url连接,供src属性引用  
64.             var fileurl = window.URL.createObjectURL(fileList[0]);                
65.             if(fileList[0].type.indexOf('image') === 0){  //如果是图片  
66.                 var str="+fileurl+"'>";  
67.                 document.getElementById('drop_area').innerHTML=str;                   
68.             }else if(video_type.in_array(fileList[0].type)){   //如果是规定格式内的视频                    
69.                 var str="
70.                 document.getElementById('drop_area').innerHTML=str;        
71.             }else{ //其他格式，输出文件名  
72.                 //alert("不预览");  
73.                 var str="文件名字:"+fileList[0].name;  
74.                 document.getElementById('drop_area').innerHTML=str;      
75.             }         
76.             resultfile = fileList[0];     
77.             console.log(resultfile);      
78.               
79.             //切片计算  
80.             filesize= resultfile.size;  
81.             setsize=500*1024;  
82.             filecount = filesize/setsize;  
83.             //console.log(filecount)  
84.             //定义进度条  
85.             pro.max=parseInt(Math.ceil(filecount));   
86.               
87.               
88.               
89.             i =getCookie(resultfile.name);  
90.             i = (i!=null && i!="")?parseInt(i):0  
91.               
92.             if(Math.floor(filecount)i){  
93.                 alert("已经完成");  
94.                 pro.value=i+1;  
95.                 persent.innerHTML="100%";  
96.               
97.             }else{  
98.                 alert(i);  
99.                 pro.value=i;  
100.                 p=parseInt(i)*100/Math.ceil(filecount)  
101.                 persent.innerHTML=parseInt(p)+"%";  
102.             }  
103.               
104.         },false);    
105.           
106.         //3.ajax上传  
107.   
108.         var stop=1;  
109.         function xhr2(){  
110.             if(stop==1){  
111.                 return false;  
112.             }  
113.             if(resultfile==""){  
114.                 alert("请选择文件")  
115.                 return false;  
116.             }  
117.             i=getCookie(resultfile.name);  
118.             console.log(i)  
119.             i = (i!=null && i!="")?parseInt(i):0  
120.               
121.             if(Math.floor(filecount)parseInt(i)){  
122.                 alert("已经完成");  
123.                 return false;  
124.             }else{  
125.                 //alert(i)  
126.             }  
127.             var xhr = new XMLHttpRequest();//第一步  
128.             //新建一个FormData对象  
129.             var formData = new FormData(); //++++++++++  
130.             //追加文件数据  
131.               
132.             //改变进度条  
133.             pro.value=i+1;  
134.             p=parseInt(i+1)*100/Math.ceil(filecount)  
135.             persent.innerHTML=parseInt(p)+"%";  
136.             //进度条  
137.               
138.               
139.             if((filesize-i*setsize)>setsize){  
140.                 blobfile= resultfile.slice(i*setsize,(i+1)*setsize);  
141.             }else{  
142.                 blobfile= resultfile.slice(i*setsize,filesize);  
143.                 formData.append('lastone', Math.floor(filecount));  
144.             }  
145.                 formData.append('file', blobfile);  
146.                 //return false;  
147.                 formData.append('blobname', i); //++++++++++  
148.     　　      formData.append('filename', resultfile.name); //++++++++++  
149.                 //post方式  
150.                 xhr.open('POST', 'xhr2.php'); //第二步骤  
151.                 //发送请求  
152.                 xhr.send(formData);  //第三步骤  
153.                 stopbutton.innerHTML = "暂停"  
154.                 //ajax返回  
155.                 xhr.onreadystatechange = function(){ //第四步  
156.             　　　　if ( xhr.readyState == 4 && xhr.status == 200 ) {  
157.             　　　　　　console.log( xhr.responseText );  
158.                         if(ifilecount){  
159.                             xhr2();  
160.                         }else{  
161.                             i=0;  
162.                         }         
163.             　　　　}  
164.             　　};  
165.                 //设置超时时间  
166.                 xhr.timeout = 20000;  
167.                 xhr.ontimeout = function(event){  
168.             　　　　alert('请求超时，网络拥堵！低于25K/s');  
169.             　　}           
170.                   
171.                 i=i+1;  
172.                 setCookie(resultfile.name,i,365)  
173.                   
174.         }  
175.           
176.         //设置cookie  
177.         function setCookie(c_name,value,expiredays)  
178.         {  
179.             var exdate=new Date()  
180.             exdate.setDate(exdate.getDate()+expiredays)  
181.             document.cookie=c_name+ "=" +escape(value)+  
182.             ((expiredays==null) ? "" : ";expires="+exdate.toGMTString()+";path=/")  
183.         }  
184.         //获取cookie  
185.         function getCookie(c_name)  
186.         {  
187.         if (document.cookie.length>0)  
188.           {  
189.           c_start=document.cookie.indexOf(c_name + "=")  
190.           if (c_start!=-1)  
191.             {   
192.             c_start=c_start + c_name.length+1   
193.             c_end=document.cookie.indexOf(";",c_start)  
194.             if (c_end==-1) c_end=document.cookie.length  
195.             return unescape(document.cookie.substring(c_start,c_end))  
196.             }   
197.           }  
198.         return ""  
199.         }  
200.           
201.           
202.         function stopup(){  
203.             if(stop==1){  
204.                 stop = 0  
205.                   
206.                 xhr2();  
207.             }else{  
208.                 stop = 1  
209.                 stopbutton.innerHTML = "继续"  
210.                   
211.             }  
212.               
213.         }  
214.         script>  
215.     body>  
216. html>  

php代码

[php] view plain copy

2. //$name=$_POST['username'];  
3. $dir=$_POST['filename'];  
4. $dir="uploads/".md5($dir);  
5. file_exists($dir) or mkdir($dir,0777,true);  
6.   
7.   
8. $path=$dir."/".$_POST['blobname'];  
9.   
10.   
11. //print_r($_FILES["file"]);  
12. move_uploaded_file($_FILES["file"]["tmp_name"],$path);  
13.   
14. if(isset($_POST['lastone'])){  
15.     echo $_POST['lastone'];  
16.     $count=$_POST['lastone'];  
17.       
18.     $fp   = fopen($_POST['filename'],"abw");  
19.     for($i=0;$i$count;$i++){  
20.         $handle = fopen($dir."/".$i,"rb");    
21.         fwrite($fp,fread($handle,filesize($dir."/".$i)));    
22.         fclose($handle);      
23.     }  
24.     fclose($fp);  
25. }  
26.       
27.       
28. ?> 
    

以上就介绍了 html5解决大文件断点续传，包括了方面的内容，希望对PHP教程有兴趣的朋友有所帮助。