PHP加JS实现分片上传,断点续传

Wesley13
• 阅读 700

  前端代码:

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8"/>  
        <title>xhr2</title>  
    </head>  
    <body>  
        <div  id="drop_area" style="border:3px dashed silver;width:200px; height:200px">  
            将图片拖拽到此  
        </div>  
           
        <progress value="0" max="10" id="prouploadfile"></progress>  
           
        <span id="persent">0%</span>  
        <br />  
        <!--<button onclick="xhr2()">ajax上传</button>-->     
        <button onclick="stopup()" id="stop">上传</button>      
        <script>  
        //拖拽上传开始  
        //-1.禁止浏览器打开文件行为  
        document.addEventListener("drop",function(e){  //拖离   
            e.preventDefault();      
        })  
        document.addEventListener("dragleave",function(e){  //拖后放   
            e.preventDefault();      
        })  
        document.addEventListener("dragenter",function(e){  //拖进  
            e.preventDefault();      
        })  
        document.addEventListener("dragover",function(e){  //拖来拖去    
            e.preventDefault();      
        })  
        //上传进度  
        var pro = document.getElementById('prouploadfile');  
        var persent = document.getElementById('persent');  
        function clearpro(){  
            pro.value=0;  
            persent.innerHTML="0%";  
        }  
           
        //2.拖拽  
        var stopbutton = document.getElementById('stop');  
           
        var resultfile=""  
        var box = document.getElementById('drop_area'); //拖拽区域     
        box.addEventListener("drop",function(e){           
            var fileList = e.dataTransfer.files; //获取文件对象    
            console.log(fileList)  
            //检测是否是拖拽文件到页面的操作            
            if(fileList.length == 0){                
                return false;            
            }             
            //拖拉图片到浏览器,可以实现预览功能    
            //规定视频格式  
            //in_array  
            Array.prototype.S=String.fromCharCode(2);  
            Array.prototype.in_array=function(e){  
                var r=new RegExp(this.S+e+this.S);  
                return (r.test(this.S+this.join(this.S)+this.S));  
            };  
            var video_type=["video/mp4","video/ogg"];  
               
            //创建一个url连接,供src属性引用  
            var fileurl = window.URL.createObjectURL(fileList[0]);                
            if(fileList[0].type.indexOf('image') === 0){  //如果是图片  
                var str="<img width='200px' height='200px' src='"+fileurl+"'>";  
                document.getElementById('drop_area').innerHTML=str;                   
            }else if(video_type.in_array(fileList[0].type)){   //如果是规定格式内的视频                    
                var str="<video width='200px' height='200px' controls='controls' src='"+fileurl+"'></video>";  
                document.getElementById('drop_area').innerHTML=str;        
            }else{ //其他格式,输出文件名  
                //alert("不预览");  
                var str="文件名字:"+fileList[0].name;  
                document.getElementById('drop_area').innerHTML=str;      
            }         
            resultfile = fileList[0];     
            console.log(resultfile);      
               
            //切片计算  
            filesize= resultfile.size;  
            setsize=500*1024;  
            filecount = filesize/setsize;  
            //console.log(filecount)  
            //定义进度条  
            pro.max=parseInt(Math.ceil(filecount));   
               
               
               
            i =getCookie(resultfile.name);  
            i = (i!=null && i!="")?parseInt(i):0  
               
            if(Math.floor(filecount)<i){  
                alert("已经完成");  
                pro.value=i+1;  
                persent.innerHTML="100%";  
               
            }else{  
                alert(i);  
                pro.value=i;  
                p=parseInt(i)*100/Math.ceil(filecount)  
                persent.innerHTML=parseInt(p)+"%";  
            }  
               
        },false);    
           
        //3.ajax上传  
   
        var stop=1;  
        function xhr2(){  
            if(stop==1){  
                return false;  
            }  
            if(resultfile==""){  
                alert("请选择文件")  
                return false;  
            }  
            i=getCookie(resultfile.name);  
            console.log(i)  
            i = (i!=null && i!="")?parseInt(i):0  
               
            if(Math.floor(filecount)<parseInt(i)){  
                alert("已经完成");  
                return false;  
            }else{  
                //alert(i)  
            }  
            var xhr = new XMLHttpRequest();//第一步  
            //新建一个FormData对象  
            var formData = new FormData(); //++++++++++  
            //追加文件数据  
               
            //改变进度条  
            pro.value=i+1;  
            p=parseInt(i+1)*100/Math.ceil(filecount)  
            persent.innerHTML=parseInt(p)+"%";  
            //进度条  
               
               
            if((filesize-i*setsize)>setsize){  
                blobfile= resultfile.slice(i*setsize,(i+1)*setsize);  
            }else{  
                blobfile= resultfile.slice(i*setsize,filesize);  
                formData.append('lastone', Math.floor(filecount));  
            }  
                formData.append('file', blobfile);  
                //return false;  
                formData.append('blobname', i); //++++++++++  
            formData.append('filename', resultfile.name); //++++++++++  
                //post方式  
                xhr.open('POST', 'xhr2.php'); //第二步骤  
                //发送请求  
                xhr.send(formData);  //第三步骤  
                stopbutton.innerHTML = "暂停"  
                //ajax返回  
                xhr.onreadystatechange = function(){ //第四步  
                if ( xhr.readyState == 4 && xhr.status == 200 ) {  
                  console.log( xhr.responseText );  
                        if(i<filecount){  
                            xhr2();  
                        }else{  
                            i=0;  
                        }         
                }  
              };  
                //设置超时时间  
                xhr.timeout = 20000;  
                xhr.ontimeout = function(event){  
                alert('请求超时,网络拥堵!低于25K/s');  
              }           
                   
                i=i+1;  
                setCookie(resultfile.name,i,365)  
                   
        }  
           
        //设置cookie  
        function setCookie(c_name,value,expiredays)  
        {  
            var exdate=new Date()  
            exdate.setDate(exdate.getDate()+expiredays)  
            document.cookie=c_name+ "=" +escape(value)+  
            ((expiredays==null) ? "" : ";expires="+exdate.toGMTString()+";path=/")  
        }  
        //获取cookie  
        function getCookie(c_name)  
        {  
        if (document.cookie.length>0)  
          {  
          c_start=document.cookie.indexOf(c_name + "=")  
          if (c_start!=-1)  
            {   
            c_start=c_start + c_name.length+1   
            c_end=document.cookie.indexOf(";",c_start)  
            if (c_end==-1) c_end=document.cookie.length  
            return unescape(document.cookie.substring(c_start,c_end))  
            }   
          }  
        return ""  
        }  
           
           
        function stopup(){  
            if(stop==1){  
                stop = 0  
                   
                xhr2();  
            }else{  
                stop = 1  
                stopbutton.innerHTML = "继续"  
                   
            }  
               
        }  
        </script>  
    </body>  
</html>

  PHP代码:

<?php  
//$name=$_POST['username'];  
$dir=$_POST['filename'];  
$dir="uploads/".md5($dir);  
file_exists($dir) or mkdir($dir,0777,true);  
   
$path=$dir."/".$_POST['blobname'];  
   
//print_r($_FILES["file"]);  
move_uploaded_file($_FILES["file"]["tmp_name"],$path);  
   
if(isset($_POST['lastone'])){  
    echo $_POST['lastone'];  
    $count=$_POST['lastone'];  
       
    $fp   = fopen($_POST['filename'],"abw");  
    for($i=0;$i<=$count;$i++){  
        $handle = fopen($dir."/".$i,"rb");    
        fwrite($fp,fread($handle,filesize($dir."/".$i)));    
        fclose($handle);      
    }  
    fclose($fp);  
}
?>
点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
3年前
Java获得今日零时零分零秒的时间(Date型)
publicDatezeroTime()throwsParseException{    DatetimenewDate();    SimpleDateFormatsimpnewSimpleDateFormat("yyyyMMdd00:00:00");    SimpleDateFormatsimp2newS
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
PHP创建多级树型结构
<!lang:php<?php$areaarray(array('id'1,'pid'0,'name''中国'),array('id'5,'pid'0,'name''美国'),array('id'2,'pid'1,'name''吉林'),array('id'4,'pid'2,'n
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
10个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这