html5解决大文件断点续传

原创 2016年08月30日 09:12:17
  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代码

  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. ?> 
版权声明:本文为博主原创文章,未经博主允许不得转载。

html5解决大文件断点续传

js代码 [html] view plain copy >  html>      head>          meta charset="UTF-8"/>      ...

html5解决大文件断点续传

js代码!DOCTYPE html> xhr2 将图片拖拽到...

html5解决大文件断点续传

js代码 [html] view plain copy   >   html>       head>           meta charset="...
  • lmy_1
  • lmy_1
  • 2016年09月07日 19:12
  • 471

html5解决大文件断点续传

html5解决大文件断点续传

html5解决大文件断点续传

js代码 [html] view plain copy >  html>      head>          meta charset="UTF-8"/>      ...
  • luyaran
  • luyaran
  • 2017年02月04日 16:08
  • 149

html5解决大文件断点续传

版权声明:本文为博主原创文章,未经博主允许不得转载。 js代码 [html] view plain copy >  html>      head>        ...

html5解决大文件断点续传

js代码 [html] view plain copy >  html>      head>          meta charset="UTF-8"/>      ...

html5解决大文件断点续传

js代码 xhr2 将图片拖拽到此 0% ajax上传--> 上传 //拖拽上传开始 //-1.禁止浏览...
  • Zph1234
  • Zph1234
  • 2016年01月25日 10:29
  • 5030

html5解决大文件断点续传

js代码 [html] view plain copy >  html>      head>          meta charset="UTF-8"/>      ...
  • p_ython
  • p_ython
  • 2017年08月02日 23:27
  • 557

html5解决大文件断点续传

js代码 [html] view plain copy >  html>      head>          meta charset="UTF-8"/>      ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html5解决大文件断点续传
举报原因:
原因补充:

(最多只允许输入30个字)