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

<!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

//$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);

}

?>

巴特西

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

最新文章

热门文章