利用WebUploader实现大文件上传和视频上传

文件上传是网站开发必不可少的,常见的有图片上传。但是大文件和视频上传不常见。这里我将自己写的视频上传demo贴出来供大家参考:

利用是最新的WebUploader插件请 下载使用最新版即可

js代码

_extensions ='3gp,mp4,rmvb,mov,avi,m4v';  
    _mimeTypes ='video/*,audio/*,application/*';  
  
$(function(){              
    var chunkSize = 500 * 1024;        //分块大小  
    var uniqueFileName = null;          //文件唯一标识符  
    var md5Mark = null;  
  
    // var _backEndUrl = '';  
  
    WebUploader.Uploader.register({  
        "before-send-file": "beforeSendFile"  
        , "before-send": "beforeSend"  
        , "after-send-file": "afterSendFile"  
    }, {  
        beforeSendFile: function(file){  
            console.log(file);  
            //秒传验证  
            var task = new $.Deferred();  
            var start = new Date().getTime();  
            (new WebUploader.Uploader()).md5File(file, 0, 10*1024*1024).progress(function(percentage){  
            }).then(function(val){  
  
                md5Mark = val;  
                _userInfo.md5 = val;  
  
                $.ajax({  
                    type: "POST",  
                    url: _backEndUrl,  
                    data: {  
                        status: "md5Check",  
                        md5: val  
                    },  
                    cache: false,  
                    timeout: 1000, //todo 超时的话,只能认为该文件不曾上传过  
                    dataType: "json"  
                }).then(function(data, textStatus, jqXHR){  
  
                    if(data.ifExist){   //若存在,这返回失败给WebUploader,表明该文件不需要上传  
                        task.reject();  
  
                        uploader.skipFile(file);  
                        file.path = data.path;  
                        UploadComlate(file);  
                    }else{  
                        task.resolve();  
                        //拿到上传文件的唯一名称,用于断点续传  
                        uniqueFileName = md5(_userInfo.openid+_userInfo.time);  
                    }  
                }, function(jqXHR, textStatus, errorThrown){    //任何形式的验证失败,都触发重新上传  
                    task.resolve();  
                    //拿到上传文件的唯一名称,用于断点续传  
                    uniqueFileName = md5(_userInfo.openid+_userInfo.time);  
                });  
            });  
            return $.when(task);  
        }  
        , beforeSend: function(block){  
            //分片验证是否已传过,用于断点续传  
            var task = new $.Deferred();  
            $.ajax({  
                type: "POST"  
                , url: _backEndUrl  
                , data: {  
                    status: "chunkCheck"  
                    , name: uniqueFileName  
                    , chunkIndex: block.chunk  
                    , size: block.end - block.start  
                }  
                , cache: false  
                , timeout: 1000 //todo 超时的话,只能认为该分片未上传过  
                , dataType: "json"  
            }).then(function(data, textStatus, jqXHR){  
                if(data.ifExist){   //若存在,返回失败给WebUploader,表明该分块不需要上传  
                    task.reject();  
                }else{  
                    task.resolve();  
                }  
            }, function(jqXHR, textStatus, errorThrown){    //任何形式的验证失败,都触发重新上传  
                task.resolve();  
            });  
  
            return $.when(task);  
        }  
        , afterSendFile: function(file){  
            var chunksTotal = 0;  
            if((chunksTotal = Math.ceil(file.size/chunkSize)) > 1){  
                //合并请求  
                var task = new $.Deferred();  
                $.ajax({  
                    type: "POST"  
                    , url: _backEndUrl  
                    , data: {  
                        status: "chunksMerge"  
                        , name: uniqueFileName  
                        , chunks: chunksTotal  
                        , ext: file.ext  
                        , md5: md5Mark  
                    }  
                    , cache: false  
                    , dataType: "json"  
                }).then(function(data, textStatus, jqXHR){  
  
                    //todo 检查响应是否正常  
  
                    task.resolve();  
                    file.path = data.path;  
                    UploadComlate(file);  
  
                }, function(jqXHR, textStatus, errorThrown){  
                    task.reject();  
                });  
  
                return $.when(task);  
            }else{  
                UploadComlate(file);  
            }  
        }  
    });  
  
    var uploader = WebUploader.create({  
        swf: "./Uploader.swf",  
        server: _backEndUrl,     //服务器处理文件的路径  
        pick: "#picker",        //指定选择文件的按钮,此处放的是id  
        resize: false,   
        dnd: "#theList",        //上传文件的拖拽容器(即,如果选择用拖拽的方式选择文件进行上传,应该要把文件拖拽到的区域容器)  
        paste: document.body,   //[可选] [默认值:undefined]指定监听paste事件的容器,如果不指定,不启用此功能。此功能为通过粘贴来添加截屏的图片。建议设置为document.body  
        disableGlobalDnd: true, //[可选] [默认值:false]是否禁掉整个页面的拖拽功能,如果不禁用,图片拖进来的时候会默认被浏览器打开。  
        compress: false,  
        prepareNextFile: true,   
        chunked: true,   
        chunkSize: chunkSize,  
        chunkRetry: 2,    //[可选] [默认值:2]如果某个分片由于网络问题出错,允许自动重传多少次?  
        threads: true,      //[可选] [默认值:3] 上传并发数。允许同时最大上传进程数。  
        formData: function(){return $.extend(true, {}, _userInfo);},   
        fileNumLimit: 1,   
        fileSingleSizeLimit: 50 * 1024 * 1024,// 限制在50M  
        duplicate: true,  
        accept: {        
            title: '大文件上传',  //文字描述  
            extensions: _extensions,     //允许的文件后缀,不带点,多个用逗号分割。,jpg,png,  
            mimeTypes: _mimeTypes,      //多个用逗号分割。image/*,  
        },  
    });  
  
    /**  
     * 验证文件格式以及文件大小  
     */  
    uploader.on("error",function (type,handler){  
        if (type=="Q_TYPE_DENIED"){  
            swal({  
                title:'',  
                text: '请上传MP4格式的视频~',  
                type: "warning",  
                confirmButtonColor: "#DD6B55",  
                confirmButtonText: "我知道了",  
            });  
        }else if(type=="F_EXCEED_SIZE"){  
            swal({  
                title:'',  
                text: '视频大小不能超过50M哦~',  
                type: "warning",  
                confirmButtonColor: "#DD6B55",  
                confirmButtonText: "我知道了",  
            });  
        }  
    });  
  
    uploader.on("fileQueued", function(file){  
        $('#theList').show();  
        $("#theList").append('<li id="'+file.id+'" class="upload_li">' +  
            ' <img /> <span class="file_name upload_li">'+file.name+'</span></li><li class="upload_li"><span class="itemUpload weui-btn weui-btn_mini weui-btn_primary">上传</span><span class="itemStop weui-btn weui-btn_mini weui-btn_default">暂停</span><span class="itemDel weui-btn weui-btn_mini weui-btn_warn">删除</span></li><li class="upload_li">' +  
            '<div id="percentage'+file.id+'" class="percentage"><div class="weui-progress__bar"><div class="weui-progress__inner-bar js_progress" style="width: 0%;"></div> <b id="pers"></b> </div></div>' +  
        '</li>');  
          
        var $img = $("#" + file.id).find("img");  
          
        uploader.makeThumb(file, function(error, src){  
            if(error){  
                $img.replaceWith("<span class='no_view'>视频暂不能预览</span>");  
            }  
  
            $img.attr("src", src);  
        });  
          
    });  
      
    $("#theList").on("click", ".itemUpload", function(){  
        uploader.upload();  
  
        //"上传"-->"暂停"  
        $(this).hide();  
        $(".itemStop").css('display','inline-block');  
        $(".itemStop").show();  
    });  
  
    $("#theList").on("click", ".itemStop", function(){  
        uploader.stop(true);  
  
        //"暂停"-->"上传"  
        $(this).hide();  
        $(".itemUpload").show();  
    });  
  
    //todo 如果要删除的文件正在上传(包括暂停),则需要发送给后端一个请求用来清除服务器端的缓存文件  
    $("#theList").on("click", ".itemDel", function(){  
        uploader.removeFile($('.upload_li').attr("id"));    //从上传文件列表中删除  
  
        $('.upload_li').remove();   //从上传列表dom中删除  
    });  
      
    uploader.on("uploadProgress", function(file, percentage){  
        $(".percentage").find('.js_progress').css("width",percentage * 100 + "%");  
        $(".percentage").find('#pers').text(parseInt(percentage * 100) + "%");  
    });  
  
    function UploadComlate(file){  
        console.log(file);  
        if(file && file.name){  
            $('#vedio').val(file.name);  
            $(".percentage").find('#pers').html("<span style='color:green;'>上传完毕</span>");  
            $(".itemStop").hide();  
            $(".itemUpload").hide();  
            $(".itemDel").hide();  
        }else{  
            $(".percentage").find('#pers').html("<span style='color:red;'>上传失败,请您检查网络状况~</span>");  
            $(".itemStop").hide();  
            $(".itemUpload").hide();  
        }  
  
    }  
  
})  

PHP控制器

public function vupload(){  
        set_time_limit (0);  
        //关闭缓存  
        header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");  
        header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");  
        header("Cache-Control: no-store, no-cache, must-revalidate");  
        header("Cache-Control: post-check=0, pre-check=0", false);  
        header("Pragma: no-cache");  
  
        $ip_path = './uploads/'.$_SESSION['userinfo']['id'];  
        $save_path = 'uploads/'.$_SESSION['userinfo']['id'];  
        $uploader =  new \Org\Util\Vupload;  
        $uploader->set('path',$ip_path);  
        //用于断点续传,验证指定分块是否已经存在,避免重复上传  
        if(isset($_POST['status'])){  
            if($_POST['status'] == 'chunkCheck'){  
                $target =  $ip_path.'/'.$_POST['name'].'/'.$_POST['chunkIndex'];  
                if(file_exists($target) && filesize($target) == $_POST['size']){  
                    die('{"ifExist":1}');  
                }  
                die('{"ifExist":0}');  
  
            }elseif($_POST['status'] == 'md5Check'){  
  
                //todo 模拟持久层查询  
                $dataArr = array(  
                    'b0201e4d41b2eeefc7d3d355a44c6f5a' => 'kazaff2.jpg'  
                );  
  
                if(isset($dataArr[$_POST['md5']])){  
                    die('{"ifExist":1, "path":"'.$dataArr[$_POST['md5']].'"}');  
                }  
                die('{"ifExist":0}');  
            }elseif($_POST['status'] == 'chunksMerge'){  
  
                if($path = $uploader->chunksMerge($_POST['name'], $_POST['chunks'], $_POST['ext'])){  
                    //todo 把md5签名存入持久层,供未来的秒传验证  
                    session('video_path', $save_path.'/'.$path);  
                    die('{"status":1, "path": "'.$save_path.'/'.$path.'"}');  
                }  
                die('{"status":0}');  
            }  
        }  
  
        if(($path = $uploader->upload('file', $_POST)) !== false){  
            if(!session('video_path')){  
                session('video_path', $save_path.'/'.$path);  
            }  
            die('{"status":1, "path": "'.$save_path.'/'.$path.'"}');  
        }  
        die('{"status":0}');  
    }  

封装的上传类库

<?php  
/** 
 * 
 * 版权所有:重庆市环境保护信息中心 
 * 作    者:Sqc 
 * 日    期:2016-12-06 
 * 版    本:1.0.0 
 * 功能说明:用于视频等上传。 
 * 
 **/  
namespace Org\Util;  
Class Vupload  
{     
    //要配置的内容  
    private $path = "./uploads";  
    private $allowtype = array('jpg', 'gif', 'png', 'mp4', 'mp3','3gp','rmvb','mov','avi','m4v');  
    private $maxsize = 104857600;//  
    private $israndname = true;  
  
    private $originName;  
    private $tmpFileName;  
    private $fileType;  
    private $fileSize;  
    private $newFileName;  
    private $errorNum = 0;  
    private $errorMess = "";  
      
    private $isChunk = false;  
    private $indexOfChunk = 0;  
  
    public function _initialize(){  
        parent::_initialize();  
    }  
  
    /** 
     * 用于设置成员属性($path, $allowtype, $maxsize, $israndname) 
     * 可以通过连贯操作一次设置多个属性值 
     * @param $key  成员属性(不区分大小写) 
     * @param $val  为成员属性设置的值 
     * @return object 返回自己对象$this, 可以用于连贯操作 
     */  
    function set($key, $val){  
        $key = strtolower($key);  
        if (array_key_exists($key, get_class_vars(get_class($this)))){  
            $this->setOption($key, $val);  
        }  
        return $this;  
    }  
  
    /** 
     * 调用该方法上传文件 
     * Enter description here ... 
     * @param $fileField    上传文件的表单名称 
     * 
     */  
    function upload($fileField, $info){  
      
        //判断是否为分块上传  
        $this->checkChunk($info);  
          
        if (!$this->checkFilePath($this->path)){  
            $this->errorMess = $this->getError();  
            return false;  
        }  
  
        //将文件上传的信息取出赋给变量  
        $name = $_FILES[$fileField]['name'];  
        $tmp_name = $_FILES[$fileField]['tmp_name'];  
        $size = $_FILES[$fileField]['size'];  
        $error = $_FILES[$fileField]['error'];  
  
  
        //设置文件信息  
        if ($this->setFiles($name, $tmp_name, $size, $error)){  
          
            //如果是分块,则创建一个唯一名称的文件夹用来保存该文件的所有分块  
            if($this->isChunk){  
                $uploadDir = $this->path;  
                if($info){  
                    $tmpName = $this->setDirNameForChunks();  
                     
                     if(!$this->checkFilePath($uploadDir . '/' . $tmpName)){  
                        $this->errorMess = $this->getError();  
                        return false;  
                    }  
                }  
        //         $tmpName = $this->setDirNameForChunks($info);  
        //         if(!$this->checkFilePath($uploadDir . '/' . $tmpName)){  
                    // $this->errorMess = $this->getError();  
        //          return false;  
        //         }  
                  
                //创建一个对应的文件,用来记录上传分块文件的修改时间,用于清理长期未完成的垃圾分块  
                touch($uploadDir.'/'.$tmpName.'.tmp');  
            }  
  
            if($this->checkFileSize() && $this->checkFileType()){  
                $this->setNewFileName();  
                if ($this->copyFile()){  
                    return $this->newFileName;  
                }  
            }  
        }  
  
        $this->errorMess = $this->getError();  
        return false;  
    }  
  
    public function chunksMerge($uniqueFileName, $chunksTotal, $fileExt){  
        $targetDir = $this->path.'/'.$uniqueFileName;  
        //检查对应文件夹中的分块文件数量是否和总数保持一致  
        if($chunksTotal > 1 && (count(scandir($targetDir)) - 2) == $chunksTotal){  
            //同步锁机制  
            $lockFd = fopen($this->path.'/'.$uniqueFileName.'.lock', "w");  
            if(!flock($lockFd, LOCK_EX | LOCK_NB)){  
                fclose($lockFd);  
                return false;  
            }  
  
            //进行合并  
            $this->fileType = $fileExt;  
            $finalName = $this->path.'/'.($this->setOption('newFileName', $this->proRandName()));  
            $file = fopen($finalName, 'wb');  
            for($index = 0; $index < $chunksTotal; $index++){  
                $tmpFile = $targetDir.'/'.$index;  
                $chunkFile = fopen($tmpFile, 'rb');  
                $content = fread($chunkFile, filesize($tmpFile));  
                fclose($chunkFile);  
                fwrite($file, $content);  
  
                //删除chunk文件  
                unlink($tmpFile);  
            }  
            fclose($file);  
            //删除chunk文件夹  
            rmdir($targetDir);  
            unlink($this->path.'/'.$uniqueFileName.'.tmp');  
  
            //解锁  
            flock($lockFd, LOCK_UN);  
            fclose($lockFd);  
            unlink($this->path.'/'.$uniqueFileName.'.lock');  
  
            return $this->newFileName;  
  
        }  
        return false;  
    }  
  
    //获取上传后的文件名称  
    public function getFileName(){  
        return $this->newFileName;  
    }  
  
    //上传失败后,调用该方法则返回,上传出错信息  
    public function getErrorMsg(){  
        return $this->errorMess;  
    }  
  
    //设置上传出错信息  
    public function getError(){  
        $str = "上传文件<font color='red'>{$this->originName}</font>时出错:";  
        switch ($this->errorNum) {  
            case 4:  
                $str.= "没有文件被上传";  
                break;  
            case 3:  
                $str.= "文件只有部分被上传";  
                break;  
            case 2:  
                $str.= "上传文件的大小超过了HTML表单中MAX_FILE_SIZE选项指定的值";  
                break;  
            case 1:  
                $str.= "上传的文件超过了php.ini中upload_max_filesize选项限制的值";  
                break;  
            case -1:  
                $str.= "未允许的类型";  
                break;  
            case -2:  
                $str.= "文件过大, 上传的文件夹不能超过{$this->maxsize}个字节";  
                break;  
            case -3:  
                $str.= "上传失败";  
                break;  
            case -4:  
                $str.= "建立存放上传文件目录失败,请重新指定上传目录";  
                break;  
            case -5:  
                $str.= "必须指定上传文件的路径";  
                break;  
  
            default:  
                $str .= "未知错误";  
        }  
        return $str."<br>";  
    }  
  
    //根据文件的相关信息为分块数据创建文件夹  
    //md5(当前登录用户的数据库id + 文件原始名称 + 文件类型 + 文件最后修改时间 + 文件总大小)  
    private function setDirNameForChunks(){  
        $str = $_SESSION['userinfo']['openid'].$_SESSION['userinfo']['report_time'];  
        return md5($str);  
        return $str;   
    }  
  
    //设置和$_FILES有关的内容  
    private function setFiles($name="", $tmp_name="", $size=0, $error=0){  
        $this->setOption('errorNum', $error);  
        if ($error) {  
            return false;  
        }  
        $this->setOption('originName', $name);  
        $this->setOption('tmpFileName', $tmp_name);  
        $aryStr = explode(".", $name);  
        $this->setOption("fileType", strtolower($aryStr[count($aryStr)-1]));  
        $this->setOption("fileSize", $size);  
        return true;  
    }  
  
    private function checkChunk($info){  
        if(isset($info['chunks']) && $info['chunks'] > 0){  
            $this->setOption("isChunk", true);  
              
            if(isset($info['chunk']) && $info['chunk'] >= 0){  
                $this->setOption("indexOfChunk", $info['chunk']);  
                  
                return true;  
            }  
              
            throw new Exception('分块索引不合法');  
        }  
          
        return false;  
    }  
  
    //为单个成员属性设置值  
    private function setOption($key, $val){  
        $this->$key = $val;  
        return $val;  
    }  
  
    //设置上传后的文件名称  
    private function setNewFileName(){  
        if($this->isChunk){     //如果是分块,则以分块的索引作为文件名称保存  
            $this->setOption('newFileName', $this->indexOfChunk);  
        }elseif($this->israndname) {  
            $this->setOption('newFileName', $this->proRandName());  
        }else{  
            $this->setOption('newFileName', $this->originName);  
        }  
    }  
  
    //检查上传的文件是否是合法的类型  
    private function checkFileType(){  
        if (in_array(strtolower($this->fileType), $this->allowtype)) {  
            return true;  
        }else{  
            $this->setOption('errorNum', -1);  
            return false;  
        }  
    }  
  
  
    //检查上传的文件是否是允许的大小  
    private function checkFileSize(){  
        if ($this->fileSize > $this->maxsize) {  
            $this->setOption('errorNum', -5);  
            return false;  
        }else{  
            return true;  
        }  
    }  
  
    //检查是否有存放上传文件的目录  
    private function checkFilePath($target){  
          
        if (empty($target)) {  
            $this->setOption('errorNum', -5);  
            return false;  
        }  
          
        if (!file_exists($target) || !is_writable($target)) {  
            if (!@mkdir($target, 0755)) {  
                $this->setOption('errorNum', -4);  
                return false;  
            }  
        }  
  
        $this->path = $target;  
        return true;  
    }  
  
    //设置随机文件名  
    private function proRandName(){  
        $fileName = date('YmdHis')."_".rand(100,999);  
        return $fileName.'.'.$this->fileType;  
    }  
  
    //复制上传文件到指定的位置  
    private function copyFile(){  
        if (!$this->errorNum) {  
            $path = rtrim($this->path, '/').'/';  
            $path.= $this->newFileName;  
            if (@move_uploaded_file($this->tmpFileName, $path)) {  
                return true;  
            }else{  
                $this->setOption('errorNum', -3);  
                return false;  
            }  
        }else{  
            return false;  
        }  
    }  
}