thinkphp5结合plupload实现多个视频上传

1、引入

<link rel="stylesheet" type="text/css" href="__PLUGS__/plupload/css/upload.css">
<script type="text/javascript" src="__PLUGS__/plupload/js/plugins/plupload/plupload.full.min.js"></script>

2、html代码

 <!--视频素材-->
                <div class="demo clearfix shipin" style="margin:20px auto;">
                    <a onclick="showVideoUploadBox($('#btn_video'))" id="btn_video" class="item"><i class="icon_emot_photo_video icon_video"></i><span>视频</span></a>
                </div>

                <div class="video_box_outside " style="display: none;" id="video_box_outside" tabindex="2001">
                    <div class="video_box">
                        <a class="photo_upload_close" href="javascript:void(0);"onclick="fadeout_div('#video_box_outside')"></a>
                        <div id="video_upload_area">
                            <a class="video_upload_btn" id="video_upload_btn">+</a>
                            <div class="video_textarea_upload" id="video_textarea_upload">
                                <div class="video_upload_words">
                                </div>
                            </div>
                            <div class="video_notice">支持上传大小在1GB以内的视频，请勿上传色情、反动等违法视频</div>
                        </div>

                        <div class="layer_point">
                            <dl id="video_loading" class="point clearfix" style="display: none;padding: 0 0 60px">
                                <dt style="" id="loading_bar">
                                    <span class="loading_bar"><em id="percent" style="width: 27%;"></em></span>
                                    <span id="percentnum" class="S_txt2 load_num">27%</span>
                                </dt>
                                <dd>
                                    <p id="updesc">视频上传中...</p>
                                    <p class="S_txt2"><label id="uploading_tip">上传速度取决于您的网速，请耐心等待。</label>
                                    </p>
                                </dd>
                            </dl>
                            <div id="video_success" style="display: none">
                                <dl class="point clearfix">
                                    <dt>
                                        <span class="W_icon icon_succB"></span>
                                    </dt>
                                    <dd>
                                        <p id="upload_succ">视频上传成功</p>
                                    </dd>
                                </dl>
                                <div class="upload_know">
                                    <a class="btn" href="javascript:void(0);" onclick="fadeout_div('#video_box_outside')">我知道了</a>
                                </div>
                            </div>
                        </div>
                        <div class="upload_video_area" id="upload_video_area">
                            <a id="upload_video" class="btn disabled" href="javascript:void(0);">开始上传</a>
                        </div>
                        <div class="arrow_layer"><span class="arrow_top_area"><i class="arrow_top_bg"></i><em class="arrow_top"></em></span></div>
                    </div>

                </div>

                <div class="layui-form-item shipin" >
                    <label  class="layui-form-label">视频地址</label>
                    <div class="layui-input-block">
                        <input type="text" id="dz"  class="layui-input"  />
                    </div>
                </div>

3、js处理代码

<script >
    let uploader_video = new plupload.Uploader({
        runtimes: 'gears,html5,html4,silverlight,flash',
        browse_button: ['video_upload_btn'], // 上传按钮
        url: "{:url('admin/common/upVideos')}", //远程上传地址
        flash_swf_url: '__PLUGS__/plupload/js/plugins/plupload/Moxie.swf', //flash文件地址
        silverlight_xap_url: '__PLUGS__/plupload/js/plugins/plupload/Moxie.xap', //silverlight文件地址
        filters: {
            max_file_size: '1gb', //最大上传文件大小（格式100b, 10kb, 10mb, 1gb）
            mime_types: [//允许文件上传类型
                {title: "files", extensions: "mp4,flv,3gp,mov,avi,rmvb,mkv,wmv"}
            ]
        },
        multi_selection: true, //true:ctrl多文件上传, false 单文件上传
        init: {
            FilesAdded: function(up, files) { //文件上传前
                let file_length=$(".video_name_box").length;
                for (let i=0;i<files.length;i++) {
                    let k=' <a class="video_name_box"  href="javascript:void(0)">\n' +
                        '                        <img src="__PLUGS__/plupload/images/icon_video.png" style="width:13.5px;height: 9px"/>\n' +
                        '                       '+files[i].name+'\n' +
                        '                        <span class="photo_upload_close ck" data-id="'+files[i].id+'"  ></span>\n' +
                        '                    </a><br/>';
                    if (file_length ==6){
                        alert("最多添加6个视频");
                    } else {
                        $(".video_upload_words").append(k);
                    }
                }
                $(".video_name_box").css({"display": "inline-block"});
                $("#upload_video").removeClass("disabled");
                $("#upload_video").click(function() {
                    uploader_video.start(); //调用实例对象的start()方法开始上传文件，当然你也可以在其他地方调用该方法
                });
            },
            UploadProgress: function(up, file) { //上传中，显示进度条
                $("#video_loading").show();
                $('#upload_video_area,#video_upload_area').hide();
                var percent = file.percent;
                $("#percent").css({"width": percent + "%"});
                $("#percentnum").text(percent + "%");
                $("#video_success").hide();

            },
            FileUploaded: function(up, file, info) { //文件上传成功的时候触发
                $("#video_loading").hide();
                $("#video_success").show();
                let data = eval("(" + info.response + ")");//解析返回的json数据
                let k=$("#dz");
                let dz=k.val();
                if (dz==null || dz==''){
                    k.val(data.path);
                }else {
                    k.val(dz+","+data.path);
                }
                // alert(data.code+data.path);
                console.log(data);
            },
            Error: function(up, err) { //上传出错的时候触发
                alert(err.message);
            }
        }
    });

    //实例化
    uploader_video.init();
    //显示上传弹出层
    function showVideoUploadBox(obj) {
        var left = obj.offset().left;
        var top = obj.offset().top + 26;
        var z_index_init = 1000;
        if ($("#post_box").css("display") == 'block') {
            z_index_init = 3000;
        }
        $("#photo_upload_box_outside").css({"z-index": z_index_init});
        $("#video_box_outside").css({"left": left, "top": top, "z-index": z_index_init + 1}).show();
        $("#video_upload_area").show();
        $("#video_loading,#video_success").hide();
        reupload_video();
    }

    //重新上传
    function reupload_video() {
        $('#video_upload_btn').show();
        $('#video_name_box').hide();
        $("#upload_video_area").show().addClass("disabled");
        $("#video_success").hide();
        $(".video_upload_words").html("");
    }

    /**
     * 删除
     */
    $(document).on("click",".ck",function(){
        let msg="确定移除该视频吗？";
        if (confirm(msg)==true){
            let file_id=$(this).attr("data-id");
            //uploader_video.stop();
            let obj_file = uploader_video.getFile(file_id);
            uploader_video.removeFile(obj_file);
            $(this).parent().remove();
            return true;
        }else{
            return false;
        }
    });

    function fadeout_div(id) {
        $(id).fadeOut();
    }
</script >

4、php代码

public function upVideos(){

 if ($_POST) {
            $file=Request::file("file");

            $info = $file->validate(['size' => 1 * 1024 * 1024 * 1024, 'ext' => "mp4,flv,3gp,mov,avi,rmvb,mkv,wmv"])->move(ROOT_PATH.'public'.DS_PROS.'upload'.DS_PROS."video");

            if ($info){
                $path = '/upload'.DS_PROS."video".DS_PROS.$info->getSaveName();

                $path = str_replace("\\", "/", $path);

                return json_encode(array("code" => 1, "path" => $path, "name" => $info->getSaveName()));
            }else{

                return json_encode(array("code" => 0,"msg"=>"上传有误，请检查服务器配置！"));
            }

        }

}

5、效果图

官网下载：http://www.luckyhhy.cn