文件上传（支持断点续传/大文件切片上传）

最新推荐文章于 2024-06-02 18:53:06 发布

zhumengstyle

最新推荐文章于 2024-06-02 18:53:06 发布

阅读量4k

点赞数 4

分类专栏： php总结 javascript 文章标签：文件上传

本文链接：https://blog.csdn.net/zhumengstyle/article/details/79642781

版权

php总结同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

javascript

9 篇文章 0 订阅

订阅专栏

参考地址（http://blog.csdn.net/zph1234/article/details/50577885）
下面是实际使用demo

前台代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>上传文件</title>
    <script src="/js/jquery-1.8.2.min.js"></script>
</head>
<body>
<div  id="drop_area" style="border:3px dashed silver;width:300px; height:200px">
    将文件拖拽到此<br/>（您的文件名请勿重复！）
</div>
<progress value="0" max="10" id="prouploadfile"  style="width:300px;"></progress>
<span id="persent">0%</span>
<br/><br/>
<button onclick="stopup()" id="stop" style="width:100px; margin-left:100px;">上传</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;
        //检测是否是拖拽文件到页面的操作
        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{
            //其他格式，输出文件名
            var str="文件名字:"+fileList[0].name;
            document.getElementById('drop_area').innerHTML=str;
        }
        resultfile = fileList[0];
        //切片计算
        filesize= resultfile.size;
        setsize=1000*1024;
        filecount = filesize/setsize;
        //定义进度条
        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{
            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);
        i = (i!=null && i!="")?parseInt(i):0
        if(Math.floor(filecount)<parseInt(i)){
            alert("已经上传完成！");
            return false;
        }
        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);
        formData.append('blobname', i);
        formData.append('filename', resultfile.name); 
        //设置响应返回的数据格式
        //post方式
        xhr.open('POST', '/document/addTempleteNew_dd'); //第二步骤
        //发送请求
        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;
                }
                if(xhr.responseText!="not end"){
                    window.parent.$('#affixdiv').after(xhr.responseText);
                }else{
                    console.log('正在分片上传中('+Math.floor(filecount)+')...'+i);
                }
            }
        };
        //设置超时时间
        xhr.timeout = 20000;
        xhr.ontimeout = function(event){
            alert('请求超时，网络拥堵！\n（如果文件已经上传完成,请忽略此消息！）');
        }
        i=i+1;
        setCookie(resultfile.name,i,1);//1天
    }
    //设置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
        header("Content-type: text/html; charset=utf-8");
        $uid=$this->info['id'];
        $UpdType = array('gif', 'jpg', 'jpeg', 'png', 'bmp','swf', 'flv', 'mp3', 'wav', 'wma', 'wmv', 'mid','doc', 'docx', 'xls', 'xlsx', 'ppt', 'htm', 'html', 'txt', 'zip', 'rar', 'gz', 'bz2','pdf', 'mp4', 'rm', 'rmvb', 'asf', 'mkv', 'mpg', 'mepg', '3gp', 'ogg');
        if ($_POST) {
            $filename=iconv('utf-8','gbk',$_POST['filename']);
            $fileTypes =explode(".",$filename);
            $updFileExt = strtolower($fileTypes[count($fileTypes)-1]);
            if(!in_array($updFileExt,$UpdType)) die('此类型不允许上传至服务器！');
            $dir=$_SERVER['DOCUMENT_ROOT']."/uploads_file_pices/".$uid.'/'.md5($filename);
            $dir_complete_file_dir=$_SERVER['DOCUMENT_ROOT'].'/uploads_complete_file';
            if(!file_exists($dir)){
                mkdir($dir,0777,true);
            }
            if(!file_exists($dir_complete_file_dir)){
                mkdir($dir_complete_file_dir,0777,true);
            }
            $path=$dir."/".$_POST['blobname'];
            move_uploaded_file($_FILES["file"]["tmp_name"],$path);
            if(isset($_POST['lastone'])){
                $count=$_POST['lastone'];
                $fp = fopen($dir_complete_file_dir.'/'.$filename,"abw");
                for($i=0;$i<=$count;$i++){
                    $handle = fopen($dir."/".$i,"rb");
                    fwrite($fp,fread($handle,filesize($dir."/".$i)));
                    fclose($handle);
                    @unlink($_SERVER['DOCUMENT_ROOT'].'/'.$dir."/".$i);//删除文件
                }
                @rmdir($_SERVER['DOCUMENT_ROOT'].'/'.$dir);//删除文件夹
                fclose($fp);
                //资源路径
                list($usec, $sec) = explode(' ',microtime());
                $ymd  = date('YmdHis', (string)$sec);
                $usec = substr((string)$usec, 2);
                $microSenond =$ymd.$usec;
                $newFileName = $microSenond . '.' . $updFileExt ;
                $fileStorgePath_dir = $_SERVER['DOCUMENT_ROOT'].'/file/upload'.'/'.date('Y-m', time()).'/'.date('d', time());
                $fileStorgePath = '/file/upload'.'/'.date('Y-m', time()).'/'.date('d', time()).'/'.$newFileName;
                if(!file_exists($fileStorgePath_dir)){
                    mkdir($fileStorgePath_dir,0777,true);
                }
                $copy=copy($dir_complete_file_dir.'/'.$filename,$_SERVER['DOCUMENT_ROOT'].$fileStorgePath); //拷贝到新目录
                if($copy){
                    @unlink($dir_complete_file_dir.'/'.$filename); //删除旧目录下的文件
                    echo 'OK';
                }else{
                    die('文件转移失败！');
                }
            }else{
                echo 'NO';
            }
        }

zhumengstyle

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
文件上传（支持断点续传/大文件切片上传）

参考地址（http://blog.csdn.net/zph1234/article/details/50577885）下面是实际使用demo 前台代码&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"/&gt; &lt;title&gt;上传文件&lt;/title&am
复制链接

扫一扫