海豚 php上传视频方法（引用 layui的js 与css）

最新推荐文章于 2022-11-04 17:34:23 发布

原创最新推荐文章于 2022-11-04 17:34:23 发布 · 973 阅读

0 ·

CC 4.0 BY-SA版权

PHP 同时被 3 个专栏收录

34 篇文章

订阅专栏

TP5

29 篇文章

订阅专栏

layui

6 篇文章

订阅专栏

本文详细介绍了一个基于layui的视频上传组件的实现，包括HTML结构、JS交互逻辑及PHP后端处理流程。该组件允许用户选择并预览视频，通过AJAX上传至服务器，并返回上传状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.html代码

<div class="layui-upload" >
<div>
    <label class="col-xs-12" for="{$form[type].name}" style="margin-left: 13px;">{$form[type].title|htmlspecialchars}</label>
    <button type="button" class="layui-btn uploadVideo"  id="upload_video_{$form[type].name}" style="    margin-bottom: 11px;background-color:#00b7ee;margin-left: 31px;">
        <i class="layui-icon"></i>上传视频</button>
    <div class="layui-upload_video">
        <input type="hidden" name="{$form[type].name}" data-type="video" data-size="{$form[type]['size']|default=0}" id="{$form[type].name}" value="{$form[type].value|default=''}">
    </div>
</div>

<div>

    <video style="margin-bottom: 11px; margin-left: 31px;display: inline-block;margin-top: 14px;width: 400px;" controls="controls" class="tag_video" src="{$form[type].value|default=''}"  id="src_{$form[type].name}" controls="controls">
        您的浏览器不支持 video 标签。
    </video>
</div>
</div>
<input type="hidden" class="opt_video" value="{$form[type].name}">

2.js代码



$(".tag_video").hide()

layui.use('upload', function(){
    var $ = layui.jquery,
        upload = layui.upload;
    var  li=[]
        ,input_file = $('.layui-upload_video').find('input')
        ,size = input_file.data('size');
    for (var j=0; j<$(".opt_video").length;j++ ){
        li.push($(".opt_video").eq(j).val());
    }
    for (var i=0;i<li.length;i++){
        upload.render({
            elem: '#upload_video_'+li[i]
            ,url: "/admin.php/admin/ajax/uploadVideo"
            ,data:{i:i}
            ,accept: 'video' //音频
            ,size:size
            ,done: function(res){
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功
                if(res.code == 0){
                    var fileName=res.data.src;
                    $("#"+li[res.i]).val(fileName)
                    $("#src_"+li[res.i]).attr("src",fileName);
                    $("#src_"+li[res.i]).show()
                    $("#src_"+li[i]).load();
                    // $.toast("音频上传成功");
                }
            }
        })
    }
});

php代码

     //上传视频
    public function uploadVideo(Request $request)
    {
        $i = input('post.i');
        //处理上传
        $file=$request->file("file");
        if ($file){
            $info = $file->move($_SERVER['DOCUMENT_ROOT'].'/uploads/video');
            if ($info){
                // 成功上传后 获取上传信息
                $url=$info->getSaveName();
                $data=["src"=>absolute_path().'/uploads/video/'.$url];
                $msg= [
                    "code"=>0,
                    "msg"=>'ok',
                    "data"=>$data,
                    'i'=>$i
                ];
                exit(json_encode($msg));
            }else{
                // 上传失败获取错误信息
                return $this->error($file->getError());
            }
        }
    }