关闭

html5解决大文件断点续传

677人阅读 评论(0) 收藏 举报
分类:

1.为什么要采用分块上传?
试想一下,如果上传的文件是一个大文件,本来上传时间就相对较久,再加上网络不稳定各种因素影响,容易导致传输中断,用户除了重传整个文件外没有更好的选择。采用分片上传可以很好地解决这个问题。

2.什么是分片上传?
分块上传,就是把一个大的文件分成若干块,一块一块的传输。如上面的case, 如果传输中断,仅需重传出错的分片,而不需要重传整个文件,大大减少了重传开销。

3.那么,采用分块上传还有哪些优势?

3.1更强容错能力

如以上的case, 出错重传,仅需重传一小块。

3.2可以模拟暂停与继续

对于一个http请求,其实并没有暂停功能,要不就是已完成,要不就是已中断。如果不分块,是没法做暂停功能。但是如果采用分块上传,在某个分块上传完了后不自动开始下个分块上传,是不是就实现了暂停功能?

利用此功能,就可以通过网络检测,在网络断开的时候自动暂停传输,网络恢复后,继续传输,给用户带来更好的体验效果。

3.3利用并发提速

如果单独的上传一个大文件,只有采用了分块上传才能利用并发请求来提速。

3.4更精准的速度跟踪

关于客户端监控上传进度,其实监控的都是客户端的发送速度,服务端有没有接收,有没有存储,是不知道的,只有在整个请求完毕,收到服务端反馈后才能确定数据已经成功接收。这样也就解释了进度显示的时候,长长出现,进度条瞬间到100%,要过一段时间才全部完成。如果采用分块上传,每个分块上传完成,可以确定这个分块服务端已经成功接收。

4.当然,分块也会有一定的副作用,本来是一个请求,分块后变成了多个请求,自然会带来网络开销。那么具体是个什么的情况呢?

可以看出来,分块越小,时间消耗越大,尤其是分块大小小到256K的时候,时间花费增长特别明显。


5.那么,如何选择一个合适的分块大小?

主要有三个方面的考虑。

    分块越小,请求越多,开销越大。所以不能设置得太小。
    分块越大,灵活度越小,前面所说的那些优势就会相对越不明显。故不能太小。
    服务端一般都会有个固定大小的接受buffer(clientbodybuffer_size), 分块的大小最好是这个值的整数倍。

综合这些考虑,推荐的分块大小是2M-5M,具体size根据产品中文件上传的大小分布来定。如果上传的文件大部分是500M以上,很大的文件,建议是5M, 如果相对较小,推荐2M。

6.文件续传原理

目前比较常用的断点续传的方法有两种,一种是通过websocket接口进行文件上传,另一种是通过ajax,两种方法各有千秋,虽然websocket听起来比较高端些~ 但是除了用了不同的协议外其他的算法基本上都是很相似的,并且服务端要开启ws接口,这里用相对方便的ajax来说明断点上传的思路。

说来说去,断点续传最核心的内容就是把文件“切片”然后再一片一片的传给服务器,但是这看似简单的上传过程却有着无数的坑。

首先是文件的识别,一个文件被分成了若干份之后如何告诉服务器你切了多少块,以及最终服务器应该如何把你上传上去的文件进行合并,这都是要考虑的。

因此在文件开始上传之前,我们和服务器要有一个“握手”的过程,告诉服务器文件信息,然后和服务器约定切片的大小,当和服务器达成共识之后就可以开始后续的文件传输了。

前台要把每一块的文件传给后台,成功之后前端和后端都要标识一下,以便后续的断点。

当文件传输中断之后用户再次选择文件就可以通过标识来判断文件是否已经上传了一部分,如果是的话,那么我们可以接着上次的进度继续传文件,以达到续传的功能。


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代码

    <?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);  
    }  
          
          
    ?>  

参考链接:http://blog.163.com/quan2006%40126/blog/static/17022863520144641422179/

http://www.cnblogs.com/zhwl/p/3580776.html


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:141643次
    • 积分:3432
    • 等级:
    • 排名:第10112名
    • 原创:213篇
    • 转载:45篇
    • 译文:3篇
    • 评论:13条
    最新评论