html5解决大文件断点续传

js代码

[html] view plain copy

1. /span>>
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>
12. progress value="0" max="10" id="prouploadfile">progress>
14. span id="persent">0%span>
15. br />
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. }
41. //2.拖拽
42. var stopbutton = document.getElementById('stop');
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"];
63. //创建一个url连接,供src属性引用
64. var fileurl = window.URL.createObjectURL(fileList[0]);
65. if(fileList[0].type.indexOf('image') === 0){ //如果是图片
66. var str=">";
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);
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));
89. i =getCookie(resultfile.name);
90. i = (i!=null && i!="")?parseInt(i):0
92. if(Math.floor(filecount)i){
93. alert("已经完成");
94. pro.value=i+1;
95. persent.innerHTML="100%";
97. }else{
98. alert(i);
99. pro.value=i;
100. p=parseInt(i)*100/Math.ceil(filecount)
101. persent.innerHTML=parseInt(p)+"%";
102. }
104. },false);
106. //3.ajax上传
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
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. //追加文件数据
132. //改变进度条
133. pro.value=i+1;
134. p=parseInt(i+1)*100/Math.ceil(filecount)
135. persent.innerHTML=parseInt(p)+"%";
136. //进度条
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. 　　}
171. i=i+1;
172. setCookie(resultfile.name,i,365)
174. }
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. }
202. function stopup(){
203. if(stop==1){
204. stop = 0
206. xhr2();
207. }else{
208. stop = 1
209. stopbutton.innerHTML = "继续"
211. }
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);
8. $path=$dir."/".$_POST['blobname'];
11. //print_r($_FILES["file"]);
12. move_uploaded_file($_FILES["file"]["tmp_name"],$path);
14. if(isset($_POST['lastone'])){
15. echo $_POST['lastone'];
16. $count=$_POST['lastone'];
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. }
28. ?>
    

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