美文网首页
实现大文件上传的办法

实现大文件上传的办法

作者: SilverBullet007 | 来源:发表于2017-04-15 09:07 被阅读0次

方法一

对php.ini进行修改

file_uploads = on; //是否允许通过http上传文件的开关(默认为开)

upload_max_filesize = 8m // PHP允许最大上传文件大小

post_max_size = 8m; //表单post提交允许最大上传文件大小

max_execution_time = 30; // php页面运行最大时间(默认30s)

max_input_time = 60; // php页面接收数据允许最大时间(默认60s)

内存限制= 8m; // php占用最大内存(默认8m)

方法二

实现大文件断点续传

思路:

将大文件看成是由多个小文件组成的(从1kb到500kb为1文件,从501kb到1000kb为2文件,以此类推;利用javascript函数slice()完成)
将这些小文件在后台组合成一个大文件(利用php函数)

引入代码

html+javascript:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>断点续传</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="![]("+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', 'duandian.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);  

}

?>

相关文章

网友评论

      本文标题:实现大文件上传的办法

      本文链接:https://www.haomeiwen.com/subject/wsknattx.html