thinkphp5结合fileupload.js实现视频上传

1、引入文件

<script src="__PLUGS__/ajax-upload/jquery.ui.widget.js"></script>
<script src="__PLUGS__/ajax-upload/jquery.iframe-transport.js"></script>
<script src="__PLUGS__/ajax-upload/jquery.fileupload.js"></script>
<script src="__PLUGS__/ajax-upload/jquery.xdr-transport.js"></script>

2、html代码

<div class="layui-form-item shipin" >
                    <label class="layui-form-label">上传视频</label>
                    <div class="layui-input-inline">
                        <input type="file" name="file" class="layui-input upvideo" />
                    </div>
                    <div class="layui-input-inline">
                        &lt;!&ndash; 上传进度条及状态： &ndash;&gt;
                        <div class="progress">
                            <div class="bar" style="width: 0%; margin-top:10px;height:10px;max-width: 300px;background: green;"></div>
                        </div>
                    </div>
                    <div class="layui-form-mid layui-word-aux upstatus"></div>
                </div>

                <div class="layui-form-item shipin" >
                    <label class="layui-form-label">视频地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="url"  value="" id="url"   lay-verType="tips" lay-reqText="请上传视频" placeholder="视频上传后的地址" lay-verify="" class="layui-input" readonly
                    </div>
                </div>

                <div class="layui-form-item shipin" >
                    <label class="layui-form-label">视频预览</label>
                    <div class="layui-input-block">
                        &lt;!&ndash; 预览框： &ndash;&gt;
                        <div class="preview" style="margin-top: 5px;"></div>
                    </div>
                </div>

3、js代码

<script >
  $(".upvideo").fileupload({
        url:"{:url('admin/common/upVideos')}",//文件上传地址，当然也可以直接写在input的data-url属性内
        multipart:true,
        dataType: "json", //如果不指定json类型，则传来的json字符串就需要解析jQuery.parseJSON(data.result);
        done:function(e,data){
            //返回的数据在data.result中，这里dataType中设置的返回的数据类型为json
            if(data.result.code==1) {
                // 上传成功：
                $(".upstatus").text(data.result.msg);
                $("#url").val(data.result.path);
                $(".preview").html("<embed src="+data.result.path+
                    " allowscriptaccess='always' allowfullscreen='true' wmode='opaque'"+
                    " width='200' height='150'></embed>");
            } else {
                // 上传失败：
                $(".progress .bar").css("width", "0%");
                $(".upstatus").html("<span style='color:red;'>"+data.result.msg+"</span>");
            }
        },
        progress: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $(".progress .bar").css("width", progress + "%");
            $(".upstatus").html("正在上传中...（请耐心等待，勿断网）");
        }
    });

</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