layui视频上传，文件上传前条件验证，视频大小，视频时长判断

最新推荐文章于 2025-04-09 17:44:37 发布

zhang123csdn

最新推荐文章于 2025-04-09 17:44:37 发布

阅读量1.2k

点赞数

文章标签： layui 前端 java

本文链接：https://blog.youkuaiyun.com/zhang123csdn/article/details/134467251

版权

本文介绍了如何在layui的视频上传功能中，通过`upload.render`方法实现视频预览、时长检查、文件大小限制，并确保上传前的条件满足。重点提到了`auto:false`和`setTimeout`的使用。

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

1 先增加video标签

 <video id="videoattr"  style="display:none"></video>

2 在layui的js中，视频上传方法upload.render中，设置

  upload.render({
        elem: '#videoUpload'
        , url: url3 //改成您自己的上传接口
        , accept: 'video' //视频
        , size: 1024 * 50 //设置文件上传最大值
        , auto: false //必须设置，不让就是自动上传 无法在上传前检测
        ,choose:function(obj){
            //预读本地文件示例，不支持ie8
            obj.preview(function(index, file, result){
                var url = URL.createObjectURL(file);//把file转成URL
                $('#videoattr').attr('src', url); //视频链接
                //setTimeout 延时方法必须使用，不然不能获取到视频时间 NaN
                var timer = setTimeout(function(){
                    var video_time = document.getElementById("videoattr").duration;//视频时长
                    //上传前的判断
                    if(video_time>180){
                        layer.msg('上传视频不能超过3分钟', {icon: 2})
                        return;
                    }
                    else if (file.size > 50 * 1024 * 1024) {
                        ayer.msg('文件大小不能超过50M!', { icon: 2});
                        return;
                    }
                    else if (file.size = 0) {
                        ayer.msg('文件大小不能为空!', { icon: 2 });
                        return;
                    }
                    else{
                        obj.upload(index, file);//文件上传
                    }
                    clearTimeout(timer);
                },1000);
            });
        }
        , before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
           
            })
        }
        , done: function (res) {
            //上传成功
           
            }
            //如果上传失败
            else {
               
            }
        }
        , error: function () {
            //演示失败状态，并实现重传
            var demoText = $('#demoText2');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
            demoText.find('.demo-reload').on('click', function () {
                uploadInst2.upload();
            });
            //layer.close(loadIndex);
        }
    });

3 必须设置项 , auto: false setTimeout方法