LayUI上传视频

最新推荐文章于 2023-11-20 10:39:34 发布

Kevin M

最新推荐文章于 2023-11-20 10:39:34 发布

阅读量2.5k

点赞数 1

分类专栏： C# HTML

本文链接：https://blog.csdn.net/qq_39072819/article/details/112802366

版权

C# 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

HTML

4 篇文章 0 订阅

订阅专栏

前端代码：


@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="~/Content/dist/css/layui.css" rel="stylesheet" />
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style>
    </style>
</head>
<body>
    <div class="layui-form-item">
        <label class="layui-form-label">上传视频</label>
        <button type="button" class="layui-btn cover" id="control_video_button">上传视频</button>
        <button type="button" class="layui-btn layui-btn-danger cover" id="control_video_del" style="display:{$detail.control_video ? 'inline' : 'none'}">删除视频</button>
        <input type="hidden" id="control_video" value="{$detail.control_video}" name="control_video" />
        <input type="hidden" id="temp_url_id" value="" name="temp_url_id" />
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-block">
            <video src="{$detail.control_video}" controls="controls" id="control_video_demo" style="width: 50%;display: {$detail.control_video ? 'block' : 'none'}">
                您的浏览器不支持 video 标签。
            </video>
            <p id="demoText"></p>
        </div>
    </div>

    <script src="~/Content/dist/layui.js"></script>
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <script src="~/Content/js/address.js"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
    <script>
        layui.use(['upload', 'form'], function () {
            var form = layui.form
                , $ = layui.jquery
                , upload = layui.upload;
          
            var uploadInst = upload.render({
                elem: '#control_video_button', //绑定元素
                url: "/Community/UploadVedio",//上传接口
                accept: 'video'
                , bindAction: '#upload' //选完文件后不自动上传
                , before: function (obj) {
                    console.log()
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        console.log(file)
                       
                        $('#control_video_demo').attr('src', result); //图片链接（base64）
                        $('#control_video_demo').css('display', 'block');
                        $('#control_video_del').css('display', 'inline');
                    });
                },
                
                done: function (res) {
                    console.log(res);

                    //如果上传失败
                    if (res.code != 1) {
                        return layer.msg('上传失败');
                    }
                    //上传成功
                    document.getElementById("control_video").value = res.filename;
                    document.getElementById("temp_url_id").value = res.msg;

                }, error: function (res) {
                    console.log(res);
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
            });

            $('#control_video_del').click(function () {
                $('#control_video_demo').css('display', 'none');
                $('#control_video_del').css('display', 'none');
                $('#control_video').val('');
            })
        });
    </script>

</body>
</html>

后端代码：（这个方法上传视频与图片格式文件通用）

public ActionResult UploadVedio()
        {
            try
            {
                var file = Request.Files[0]; //获取选中文件  
                var filecombin = file.FileName.Split('.');
                if (file == null || String.IsNullOrEmpty(file.FileName) || file.ContentLength == 0 || filecombin.Length < 2)
                {
                    return Json(new
                    {
                        fileid = 0,
                        src = "",
                        name = "",
                        msg = "上传出错 请检查文件名 或 文件内容"
                    });
                }
                //定义本地路径位置
                string local = "Upload\\Contract";
                string filePathName = string.Empty;
                string localPath = Path.Combine(HttpRuntime.AppDomainAppPath, local);

                var tmpName = Server.MapPath("~/Upload/Contract/");
                var tmp = file.FileName;
                var tmpIndex = 0;
                //判断是否存在相同文件名的文件 相同累加1继续判断
                while (System.IO.File.Exists(tmpName + tmp))
                {
                    tmp = filecombin[0] + "_" + ++tmpIndex + "." + filecombin[1];
                }

                //不带路径的最终文件名
                filePathName = tmp;

                if (!System.IO.Directory.Exists(localPath))
                    System.IO.Directory.CreateDirectory(localPath);
                string localURL = Path.Combine(local, filePathName);
                file.SaveAs(Path.Combine(localPath, filePathName));   //保存图片（文件夹）
                return Json(new
                {
                    src = "/" + localURL.Trim().Replace("\\", "/"),
                    name = Path.GetFileNameWithoutExtension(file.FileName),   // 获取文件名不含后缀名
                    msg = "上传成功"
                });
            }
            catch { }
            return Json(new
            {
                src = "",
                name = "",   // 获取文件名不含后缀名
                msg = "上传出错"
            });
        }

Kevin M

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
LayUI上传视频

前端代码：@{ Layout = null;}<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edg
复制链接

扫一扫