来自伯乐大文件断点续传

最新推荐文章于 2023-10-14 11:23:58 发布

chen782079048

最新推荐文章于 2023-10-14 11:23:58 发布

阅读量287

点赞数

分类专栏：小课堂

小课堂专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!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 οnclick="xhr2()">ajax上传</button>-->
<button οnclick="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);
}


?>