IT基地
用户登陆
我要注册
用户名或密码错误
登 陆
注 册
IT基地 >李蓝猫的博客 >我要发文
php文件分片上传,断点续传【实用版】
作者:李蓝猫   发布时间:2017-04-17 17:58:30   点击数:16743

针对问题

主要针对需要上传大文件如视频时Form表单硬性加载超时及浏览器阻塞问题的解决方案

原理

前端使用插件webuploader进行视频切片上传并实时返回进度

后端通过php处理切片存放及处理缓存切片组装 并在视频上传完毕后返回存储路径


前端示例demo

文尾附webuploader插件下载

<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html>
<title>视频分片上传简单DEMO</title>
<head>
<body>
<article class="page-container">
    <form class="form form-horizontal" id="form-article-add" action="" method="post" enctype="multipart/form-data">


        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">手机端视频:</label>
            <div class="formControls col-xs-8 col-sm-9" id="upvideo">
                <div class="uploader-thum-container">
                    <div id="fileList" class="uploader-list"></div>
                    <div id="filePicker" style="margin-right:20px;">选择文件</div>
                    注:目前视频仅支持mp4,文件名不可为中文
                </div>
            </div>
        </div>

        <div class="row cl">
            <input type="hidden" id="video_src" name="video_src">
            <input type="hidden" id="video_length" name="video_length">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
                <button id="but" class="btn btn-primary radius" type="submit">提交</button>
            </div>
        </div>
    </form>


</article>


<style>
#imgCounts{position:fixed; width:100%; height:100%; z-index:999; left:0px; top:0px; background:rgba(0,0,0,0.8); display:none; }
#imgCounts img{width:80px; margin-left:50%; margin-top:240px; float:left;}
#imgCounts .shuoming{float:left; width:100%; color:#ccc; text-align:center; font-size:16px; margin-left:43px; margin-top:20px;}
</style>
<div id="imgCounts">
    <img src="/Public/img/loading.jpg"><br></br>
    <div class="shuoming">视频上传中,请耐心等待....</div>
</div>

<script type="text/javascript" src="/Public/BackstageNew/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/Public/BackstageNew/lib/webuploader/0.1.5/webuploader.min.js"></script>

<script type="text/javascript">
$(function(){
    //视频分片上传
    $('.skin-minimal input').iCheck({
        checkboxClass: 'icheckbox-blue',
        radioClass: 'iradio-blue',
        increaseArea: '20%'
    });
    $list = $("#fileList"),
            $btn = $("#btn-star"),
            state = "pending",
            uploader;
    var uploader = WebUploader.create({
        auto: true,
        swf: 'lib/webuploader/0.1.5/Uploader.swf',
        // 文件接收服务端。
        //server: "http://file2.fadonghui.com/index.php/Home/Index/UploadVideo",
        server: "{:U('Video/VideoUpload')}",
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建,可能是input元素,也可能是flash.
        pick: {
            id: '#filePicker',
            label: '点击选择视频',
        },
        chunked: true, //是否要分片处理大文件上传
        chunkSize:5*1024*1024, //分片上传,每片2M,默认是5M
        //auto: false //选择文件后是否自动上传
        chunkRetry : 2, //如果某个分片由于网络问题出错,允许自动重传次数
        // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
        resize: false,
        // 只允许选择图片文件。
        accept: {
            title: 'mp4',
            extensions: 'mp4',
            mimeTypes: 'mp4/*'
        }
    });
    uploader.on( 'fileQueued', function( file ) {
        var $li = $('<div id="' + file.id + '" class="item">' +
                    '<div class="pic-box"><img></div>'+
                    '<div class="info">' + file.name + '</div>' +
                    '<p class="state">等待上传...</p>'+
                    '</div>'),
        $img = $li.find('img');
        $list.append( $li );
        $('#filePicker').hide();
    });
    // 文件上传过程中创建进度条实时显示。
    uploader.on( 'uploadProgress', function( file, percentage ) {
        var $li = $( '#'+file.id ),$percent = $li.find('.progress-box .sr-only');
        // 避免重复创建
        if ( !$percent.length ) {
            $percent = $('<div class="progress-box" style="border:1px solid #dedede; height:20px;"><span class="progress-bar radius"><span class="sr-only" style="float:left; margin-top:0px; width:0%; color:#fff; text-align:center;"></span></div>').appendTo( $li ).find('.sr-only');
        }
        $li.find(".state").text("上传中");
        $percent.css( 'width', percentage * 100 + '%' );
        $('.sr-only').text(percentage * 100+'%');
    });
    // 文件上传成功,给item添加成功class, 用样式标记上传成功。
    uploader.on( 'uploadSuccess', function( file ,response ) {
        $('.pic-box').hide();
        $('#video_src').val(response.filePaht);
        $('#video_length').val(response.time);
        $( '#'+file.id ).addClass('upload-state-success').find(".state").text("已上传");
    });
    // 文件上传失败,显示上传出错。
    uploader.on( 'uploadError', function( file ) {
        $( '#'+file.id ).addClass('upload-state-error').find(".state").text("上传出错");
    });
    // 完成上传完了,成功或者失败,先删除进度条。
    uploader.on( 'uploadComplete', function( file ) {
        $( '#'+file.id ).find('.progress-box').fadeOut();
    });
});


function tijiao(){
    var video_src = $('#video_src').val();

    //表单后提交
    $(function(){
        $("#form-article-add").validate({
            rules:{
                title:{
                    required:true,
                },
                synopsis:{
                    required:true,
                },
            },
            onkeyup:false,
            focusCleanup:true,
            success:"valid",
            submitHandler:function(form){
                //$(form).ajaxSubmit();
                form.submit();
            }
        });
    })
}
</script>
</body>
</html>



后台PHP处理

/**
     * 大文件切片上传
     */
    public function VideoUpload(){
        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");
        if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
            exit; // finish preflight CORS requests here
        }
        if ( !empty($_REQUEST[ 'debug' ]) ) {
            $random = rand(0, intval($_REQUEST[ 'debug' ]) );
            if ( $random === 0 ) {
                header("HTTP/1.0 500 Internal Server Error");
                exit;
            }
        }
        // header("HTTP/1.0 500 Internal Server Error");
        // exit;
        // 5 minutes execution time
        @set_time_limit(5 * 60);
        // Uncomment this one to fake upload time
        // usleep(5000);
        // Settings
        // $targetDir = ini_get("upload_tmp_dir") . DIRECTORY_SEPARATOR . "plupload";
        $targetDir = './Fadonghui/College/uploadfile/cache/';
        $uploadDir = './Fadonghui/College/uploadfile/cache/';
        $cleanupTargetDir = true; // 开启文件缓存删除
        $maxFileAge = 60*60*24; // 文件缓存时间超过时间自动删除
        // 验证缓存目录是否存在不存在创建
        if (!file_exists($targetDir)) {
            @mkdir($targetDir);
        }
        // 验证缓存目录是否存在不存在创建
        if (!file_exists($uploadDir)) {
            @mkdir($uploadDir);
        }
        // Get 或 file 方式获取文件名
        if (isset($_REQUEST["name"])) {
            $fileName = $_REQUEST["name"];
        } elseif (!empty($_FILES)) {
            $fileName = $_FILES["file"]["name"];
        } else {
            $fileName = uniqid("file_");
        }
        $oldName = $fileName;//记录文件原始名字
        $filePath = $targetDir . $fileName;
        // $uploadPath = $uploadDir . DIRECTORY_SEPARATOR . $fileName;
        // Chunking might be enabled
        $chunk = isset($_REQUEST["chunk"]) ? intval($_REQUEST["chunk"]) : 0;
        $chunks = isset($_REQUEST["chunks"]) ? intval($_REQUEST["chunks"]) : 1;
        // 删除缓存校验
        if ($cleanupTargetDir) {
            if (!is_dir($targetDir) || !$dir = opendir($targetDir)) {
                die('{"jsonrpc" : "2.0", "error" : {"code": 100, "message": "Failed to open temp directory."}, "id" : "id"}');
            }
            while (($file = readdir($dir)) !== false) {
                $tmpfilePath = $targetDir  . $file;
                // If temp file is current file proceed to the next
                if ($tmpfilePath == "{$filePath}_{$chunk}.part" || $tmpfilePath == "{$filePath}_{$chunk}.parttmp") {
                    continue;
                }
                // Remove temp file if it is older than the max age and is not the current file
                if (preg_match('/\.(part|parttmp|mp4)$/', $file) && (@filemtime($tmpfilePath) < time() - $maxFileAge)) {
                    @unlink($tmpfilePath);
                }
            }
            closedir($dir);
        }
        // 打开并写入缓存文件
        if (!$out = @fopen("{$filePath}_{$chunk}.parttmp", "wb")) {
            die('{"jsonrpc" : "2.0", "error" : {"code": 102, "message": "Failed to open output stream."}, "id" : "id"}');
        }
        if (!empty($_FILES)) {
            if ($_FILES["file"]["error"] || !is_uploaded_file($_FILES["file"]["tmp_name"])) {
                die('{"jsonrpc" : "2.0", "error" : {"code": 103, "message": "Failed to move uploaded file."}, "id" : "id"}');
            }
            // Read binary input stream and append it to temp file
            if (!$in = @fopen($_FILES["file"]["tmp_name"], "rb")) {
                die('{"jsonrpc" : "2.0", "error" : {"code": 101, "message": "Failed to open input stream."}, "id" : "id"}');
            }
        } else {
            if (!$in = @fopen("php://input", "rb")) {
                die('{"jsonrpc" : "2.0", "error" : {"code": 101, "message": "Failed to open input stream."}, "id" : "id"}');
            }
        }
        while ($buff = fread($in, 4096)) {
            fwrite($out, $buff);
        }
        @fclose($out);
        @fclose($in);
        rename("{$filePath}_{$chunk}.parttmp", "{$filePath}_{$chunk}.part");
        $index = 0;
        $done = true;
        for( $index = 0; $index < $chunks; $index++ ) {
            if ( !file_exists("{$filePath}_{$index}.part") ) {
                $done = false;
                break;
            }
        }
        //文件全部上传 执行合并文件
        if ( $done ) {
            $pathInfo = pathinfo($fileName);
            $hashStr = substr(md5($pathInfo['basename']),8,16);
            $hashName = time() . $hashStr . '.' .$pathInfo['extension'];
            $uploadPath = $uploadDir .$hashName;
            if (!$out = @fopen($uploadPath, "wb")) {
                die('{"jsonrpc" : "2.0", "error" : {"code": 102, "message": "Failed to open output stream."}, "id" : "id"}');
            }
            if ( flock($out, LOCK_EX) ) {
                for( $index = 0; $index < $chunks; $index++ ) {
                    if (!$in = @fopen("{$filePath}_{$index}.part", "rb")) {
                        break;
                    }
                    while ($buff = fread($in, 4096)) {
                        fwrite($out, $buff);
                    }
                    @fclose($in);
                    @unlink("{$filePath}_{$index}.part");
                }
                flock($out, LOCK_UN);
            }
            @fclose($out);
            /*/腾讯云--对象存储
            vendor('TencentYun/TencentYunSendFile');
            $Yun = new \TencentYunSendFile();
            $res = $Yun->uploadYun(array('tmp_name'=>$uploadPath,'name'=>$hashName),'video');
            var_dump($res);*/
            //引用第三方类库
            /*vendor('getid3.getid3');
            $getID3 = new \getID3(); //实例化类
            $ThisFileInfo = $getID3->analyze($uploadPath);//分析文件*/
            $response = array(
                'success'=>true,
                'oldName'=>$oldName,
                //'filePaht'=>$hashName,
                //'filePaht'=>substr($uploadPath,1),
                'fileSuffixes'=>$pathInfo['extension'],
                'time' =>$ThisFileInfo['playtime_string'],
            );
            //删除源文件
            /*unlink($uploadPath);*/
            die(json_encode($response));
        }
        // Return Success JSON-RPC response
        die('{"jsonrpc" : "2.0", "result" : null, "id" : "id"}');
    }

webuploader.zip

尊重作者劳动,转载请指定出处。

本站部分数据来自软件的自动采集,仅用于学习交流,决不用于商用,如有侵犯您的合法权益,请联系我们删除。
发表技术文档,,记录个人生活,聚集意见领袖,众多IT精英,以我们的技术让开发更便捷。
IT基地版权所有,伪版必究 京ICP备17064610号-1
微信QQ空间QQ好友新浪微博FacebookTwitter