HTML5는 중단점에서 대용량 파일 업로드를 재개하는 문제를 해결합니다.

JS 코드

[html] 일반보기 복사

1. >  
2. < ;html>  
3.     <머리>  
4.        <메타 문자 집합="UTF-8"/>  
5.        <제목>xhr2제목 >  
6.     머리>
7.     <본체>  
8.         <div  id="drop_area"  스타일="테두리:3px 점선 은색;너비:200px; 높이:200px">div>
9.   
10.                   < 진행률 
11. 값=
12. "0" 최대= "10" id="prouploadfile">진행상황>                   <span 
13. id=
14. "persent" >0%스팬>          <br />  
15.                      <
16. 버튼 onclick=
17. "stopup()" id="중지">上传버튼>              <스크립트>
18.         //拖拽上传开始          //-1.禁止浏览器打开文件行为           document.addEventListener("drop",function(e){  //拖离   
19.            e.preventDefault();      
20.         })  
21.         document.addEventListener("dragleave",function(e){  //拖后放   
22.             e.preventDefault();      
23.         })  
24.         document.addEventListener("dragenter",function(e){  //拖进  
25.             e.preventDefault();      
26.         })  
27.         document.addEventListener("dragover",function(e){  //拖来拖去    
28. > 🎜>        var 
pro
29.  = 
document
30. .getElementById('prouploadfile');  
31.         var persent = document.getElementById('persent');  
32.         function clearpro(){             pro.value=
0
33. ;  
34.             persent.innerHTML="0%";  
35.         }                   //2.拖拽  
36.         var 
중지 버튼
37.  = 
문서
38. .getElementById('stop');  
39.                   var 결과 파일=
""
40.   
41.         var box = 문서.getElementById('drop_area') ; //拖拽区域     
42.         box.addEventListener("drop",function(e){                      var 파일목록  = 
e
43. .dataTransfer.files;  //获取文件对象    
44.            console.log(fileList )              //检测是否是拖拽文件到页면적操작                        if(fileList.length
 == 0){              
46.               거짓 반환           
47.             }
48. // 미리보기 기능을 구현할 수 있는 브라우저로 그림을 드래그합니다. //in_array
49. Array .prototype.S
50. =문자열
51. .fromCharCode(2 )  🎜> var r
52. =new RegExp(this.S+e+this.S ) return (r.test(this.S+this.join(this.S)+this.S))
53.          } ;                                                                                            ~  🎜>fileurl = 창.URL.createObjectURL(fileList[0]) ].type.indexOf( 'image') === 0){ //그림인 경우
54. var
str
55. =
"< img 너비='200px' 높이='200px' src='"
56. +fileurl+"'>";
57. document.getElementById('drop_area')
.innerHTML
58. =
str
59. else if(video_type.in_array(fileList[0].type)){ //지정된 형식의 동영상인 경우                                                            varstr=" <동영상 너비='200px' 높이='200px' c/span>+fileurl+"'
60. >
61. 동영상>"; drop_area').innerHTML=str;  
62.    }else{ //기타 형식, 출력 파일 이름                                                        + fileList[0].name 🎜>.innerHTML=str;                                 
63.  결과파일 = fileList[0]; 
64. console.log(결과파일);
66.                                                        사이즈
=
67. 500*1024; 파일 크기
/setsize;
68. 진행률 표시줄 정의 pro.max=parseInt
(Math.ceil( 파일 개수)));
69.                                     🎜>        i =
70. 쿠키 얻기(resultfile.name);
71. = (i!=null && i!="")?parseInt(i):0
72. if(Math.floor(filecount)<i){
73. Alert(" 이미 완료됨");
74.                                                                                                                    >
 
75. persent.innerHTML=
76. "100%" ;                                                      ~      🎜>pro.value=
i
77. ; >=parseInt(i)*100/Math.ceil(filecount)
78.     
persent.innerHTML
79. =parseInt(p)+"%"; >                                                                ,false);                                                                                                             🎜>
var
80. 중지=
81. 1{
82. if(
중지
83. ==1){ false 반환 ;  >> 🎜> 경고("파일을 선택하세요")
84. return false
85.                                                                       >  i
=
86. getCookie
(resultfile.name);
88.            콘솔. 로그(i)                                                                                                         false 반환
89.                                                                   
90. var xhr = new XMLHttpRequest() // 첫 번째 단계
91.                                                                                          | 🎜 > FormData() //++++++++++
92.                                                                  🎜>                                         ~ > (파일 개수)                                    >(p)+"%";                            🎜> <<>
93. if ((Filesize-I*Setsize) & gt;
94. Setsize) {
95.  blobfile
96. = 결과 파일.slice(i*setsize,(i+ 1)*setsize);  else{ >.slice(i*setsize,filesize)        }
97. formData.append('file', blobfile)
98. //false 반환
99.          formData.append('blobname', i); //++++++++++ 
100.           formData.append('filename', resultfile.name); //++++++++++
101. //포스트 메소드
102. xhr.open('POST', 'xhr2 .php'); //두 번째 단계
103. //요청 보내기
104. xhr.send(formData) //세 번째 단계
105.  stopbutton.innerHTML = "일시중지"
106.                                                                                                                                                                        >(){ //4단계
107. if ( 상태 == 4 && xhr.status == 200 ) {
108. console.log(xhr.responseText);            if(i <파일 개수){
>             }else {
                    
110. ; //시간 초과 설정
111.  
xhr.timeout
112. =
20000
113. ; 🎜>                                                                         경고(' 요청 시간이 초과되었습니다.低于25K/s');  
114.             　　}           
115.                 
116.                 i=나+1;  
117.                 setCookie(resultfile.name,i,365)  
118.                  
119.         }
120.           
121.         //设置cookie  
122.         함수 setCookie(c_name,value, 만료일)  
123.         {  
124.             var exdate=new 날짜 ()  
125.             exdate.setDate(exdate.getDate()+expiredays)  
126.            document.cookie =c_name+ "=" +escape(값)+  
127.             ((만료일==null) ?  "" : ";만료="+exdate.toGMTString()+"; 경로=/")  
128.         }  
129.        //获取쿠키  
130.         함수 getCookie(c_name)  
131.        {  
132.         if (document.cookie. 길이>0)  
133.           {  
134.          c_start= 문서.cookie.indexOf(c_name + "=")  
135.           if (c_start!=-1)  
136.             {   
137.             c_start=c_start + c_name.길이 +1   
138.             c_end=문서.cookie.indexOf(";", c_start)  
139.             if (c_end==-1) c_end=문서.cookie.length  
140.             return unescape(document.cookie.substring(c_start,c_end))  
141.             }   
142.           }  
143.         반환 ""  
144.         }  
145.           
146.           
147.         기능 stopup(){  
148.             if(중지==1){  
149.                중지 = 0  
150.                 
151.                xhr2();  
152.             }else{  
153.                중지 = 1  
154.                stopbutton.innerHTML = "继续"  
155.                  
156.             }  
157.               
158.         }  
159.         스크립트>  
160.     본문>  
161. html>  

php代码

[ PHP] 일반보기 복사

2. //$name=$_POST['사용자 이름'];   
3. $dir=$_POST['파일명'];  
4. $dir="업로드/".md5($dir);  
5. file_exists($dir) 또는 mkdir($dir,0777,true);  
6.   
7.   
8. $path =$dir."/".$_POST[ '블롭 이름'];  
9.   
10.   
11. //print_r($_FILES[" file"]);  
12. move_uploaded_file($_FILES["file"]["tmp_name"],$path);  
13.   
14. if(isset($_POST['라스톤'])){  
15.     에코 $_POST['라스톤'];  
16.     $count=$_POST['라스톤 '];  
17.       
18.     $fp   = fopen($_POST['파일 이름'],"abw" );  
19.     for($i=0;$ 나<=$count;$i++){  
20.         $handle = fopen($dir."/".$i,"rb");    
21.         fwrite($fp,fread($ 핸들,파일 크기($dir."/".$i)));    
22.         fclose($handle);      
23.     }  
24.     fclose($fp);  
25. }  
26.       
27.       
28. ?> 
    

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