本站业务范围:1、PC端软件开发、网站开发 2、移动端APP、网站、微信接口、微商城开发 3、视频教程、课程设计和辅导 4、单片机开发 5、串口通讯调试
 当前位置:文章中心 >> Java_Jsp_Jdk_eclipse_tomcat
立即购买视频教程 php实现大文件断点续传功能
夜鹰教程网 来源:www.yyjcw.com 日期:2018-6-30 16:09:21
php实现大文件断点续传功能

这篇文章不能解决你的问题?我们还有相关视频教程云课堂 全套前端开发工程师培训课程

微信号:yyjcw10000 QQ:1416759661  远程协助需要加QQ!

业务范围:视频教程|程序开发|在线解答|Demo制作|远程调试| 点击查看相关的视频教程

技术范围:全端开发/前端开发/webapp/web服务/接口开发/单片机/C#/java/node/sql server/mysql/mongodb/android/。 



js代码

[html] view plain copy 在CODE上查看代码片派生到我的代码片

  1. <!DOCTYPE html>  

  2. <html>  

  3.     <head>  

  4.         <meta charset="UTF-8"/>  

  5.         <title>xhr2</title>  

  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.         <!--<button onclick="xhr2()">ajax上传</button>-->     

  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="<img width='200px' height='200px' src='"+fileurl+"'>";  

  67.                 document.getElementById('drop_area').innerHTML=str;                   

  68.             }else if(video_type.in_array(fileList[0].type)){   //如果是规定格式内的视频                    

  69.                 var str="<video width='200px' height='200px' controls='controls' src='"+fileurl+"'></video>";  

  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.             filesizeresultfile.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.                 blobfileresultfile.slice(i*setsize,(i+1)*setsize);  

  141.             }else{  

  142.                 blobfileresultfile.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(i<filecount){  

  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 在CODE上查看代码片派生到我的代码片

  1. <?php  

  2. //$name=$_POST['username'];  

  3. $dir=$_POST['filename'];  

  4. $dir="uploads/".md5($dir);  

  5. file_exists($diror 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. ?>  


复制链接 网友评论 收藏本文 关闭此页
上一条: 如何打开eclipse安卓开发代码提示…  下一条: java实现断点续传功能
夜鹰教程网成立于2008年,目前已经运营了将近 13 年,发布了大量关于 html5/css3/C#/asp.net/java/python/nodejs/mongodb/sql server/android/javascript/mysql/mvc/easyui/vue/echarts原创教程。 我们一直都在坚持的是:认证负责、一丝不苟、以工匠的精神来打磨每一套教程,让读者感受到作者的用心。我们默默投入的时间,确保每一套教程都是一件作品,而不是呆板的文字和视频! 目前我们推出在线辅导班试运营,模式为一对一辅导,教学工具为QQ。我们的辅导学科包括 java 、android原生开发、webapp开发、商城开发、C#和asp.net开发,winform和物联网开发、web前端开发,但不仅限于此。 普通班针对的是国内学员,例如想打好基础的大学生、想转行的有志青年、想深入学习的程序员、想开发软件的初学者或者业余爱好者等。 就业办针对即将毕业上岗的大四学生,或者打算转行的初级开发工程师。 留学生班针对的是在欧美、加拿大、澳洲、日本、韩国、新加坡等地留学的中国学子,目的是让大家熟练地掌握编程技能,按时完成老师布置的作业,并能顺利地通过考试。 详细咨询QQ:1416759661   夜鹰教程网  基于角色的权限管理系统(c-s/b-s)。
  夜鹰教程网  基于nodejs的聊天室开发视频教程
  夜鹰教程网  Git分布式版本管理视频教程
  夜鹰教程网  MVC+EasyUI视频教程
  夜鹰教程网  在线考试系统视频教程
  夜鹰教程网  MongoDB视频教程。
  夜鹰教程网 Canvas视频教程
  夜鹰教程网 报表开发视频教程
  推荐教程/优惠活动

  热门服务/教程目录

  夜鹰教程网  新手必看,详细又全面。
  夜鹰教程网  购买教程  夜鹰教程网  在线支付-方便
  夜鹰教程网  担保交易-快捷安全   夜鹰教程网  闪电发货
  夜鹰教程网  电话和QQ随时可以联系我们。
  夜鹰教程网 不会的功能都可以找我们,按工作量收费。

客服电话:153 9760 0032

购买教程QQ:1416759661  
  热点推荐
初学教程:Java Socket网络编程浅…
Java随机数总结
java读取文本文件内容并获取文件大…
字节流和字符流Java
java常用图片读写程序
怎样成为一个优秀的Java程序员
C++程序员转Java容易吗?难点在哪…
思科培训与华为培训在教材和内容方…
Java注释的使用和定义
使用 Java 实现 Comet 风格的 Web…
利用Java实现zip压缩/解压缩
Java Web三层架构的配置详解
Java Socket编程之我见
使用 Java 实现 Comet 风格的 Web…
两种J2ME网络编程的方法之一
  尊贵服务
夜鹰教程网 承接业务:软件开发 网站开发 网页设计 .Net+C#+VS2008+MSsql+Jquery+ExtJs全套高清完整版视频教程
  最近更新
short、int、long、float、double…
二进制(原码、反码、补码)
python时间模块详解
java 解决split分割空值不能得到的…
如何打开eclipse安卓开发代码提示…
php实现大文件断点续传功能
java实现断点续传功能
Windows Server 2016新功能
MyEclipse 8.5 汉化方法
jquery实现无刷新分页
什么是JSON?
什么是回调函数
jQuery 1.7下载
jquery加载XML文档
什么是MVC(三层架构)
  工具下载  需要远程协助? 

sql2008视频教程 c#视频教程

VIP服务:如果您的某个功能不会做,可以加我们QQ,给你做DEMO!

JQUERY  Asp.net教程

MVC视频教程  vs2012
.NET+sql开发
手机:15397600032 C#视频教程下载
微信小程序 vue.js高级实例视频教程

教程咨询QQ:1416759661


这篇文章不能解决你的问题?我们还有相关视频教程云课堂 全套前端开发工程师培训课程

微信号:yyjcw10000 QQ:1416759661  远程协助需要加QQ!

业务范围:视频教程|程序开发|在线解答|Demo制作|远程调试| 点击查看相关的视频教程

技术范围:全端开发/前端开发/webapp/web服务/接口开发/单片机/C#/java/node/sql server/mysql/mongodb/android/。 



关于我们 | 购买教程 | 网站建设 | 技术辅导 | 常见问题 | 联系我们 | 友情链接

夜鹰教程网 版权所有 www.yyjcw.com All rights reserved 备案号:蜀ICP备08011740号3