#Layui框架+C#+.NET # ——上传文件（图片，文件，视频）

 

<div class="layui-form" style="width:480px;display:none" id="openlayer">
    <div>
        <ul class="layui-form layui-form-pane" style="margin: 20px 20px 0 20px">
            <li class="layui-form-item" style="position: relative">
                <button type="button" class="layui-btn" id="InsertVideo" style="width: 110px;position: relative;z-index: 10;">
                    <i class="layui-icon">&#xe67c;</i>上传视频
                </button>
                <input class="layui-upload-file" type="file" accept="video/*" name="file">
                <input type="text" name="video" placeholder="请选择文件" style="position: absolute;width: 100%;padding-left: 120px;left: 0;top:0" class="layui-input" id="videosrc" value="@Model.VideoURL">
            </li>
            <li class="layui-form-item" style="position: relative">
                <button type="button" class="layui-btn" id="InsertImage" style="width: 110px;position: relative;z-index: 10;">
                    <i class="layui-icon">&#xe67c;</i>上传封面
                </button>
                <input class="layui-upload-file" type="file" accept="image/*" name="file">
                <input type="text" name="cover" placeholder="请选择文件" style="position: absolute;width: 100%;padding-left: 120px;left: 0;top:0" class="layui-input" id="imgsrc" value="@(Model.Cover==""?@Model.Cover:"")">
            </li>
        </ul>
    </div>
    <div class="layui-layer-btn layui-layer-btn-c" style="margin-top:12px">
        <a class="layui-layer-btn0" id="btnsave">确定</a>
        <a class="layui-layer-btn1" id="btncancel">取消</a>
    </div>
    <span class="layui-layer-resize"></span>
</div>

效果图：

 

 上传图片；选择图片之后暂时不自动上传图片，先显示图片的相关信息之后，之后通过按钮可统一 上传（如果有多个图片信息的话）

auto：false  //不自动上传图片

bindAction：‘#btn’  //绑定上传按钮

 

  //上传图片
            var uploadInst = upload.render({
                elem: '#InsertImage',
                url: '/TTVideo/Video/UploadVideo',
                field: "layuiVideo",
                data: { "dir": "media" },
                accept: 'images', //视频
                acceptMime: 'image/*',
                auto: false,
                bindAction: '#btnsave',
                choose: function (obj) {
                  //文件  console.log(obj);
                    obj.preview(function (index, file, result) {
                        console.log(file); //得到文件对象
                        $("#imgsrc").val(file.name);
                    });
                },
                before: function (obj) {
                    index = layer.load();
                },
                done: function (res) {
                    layer.close(index);
                    if (res.code == 0) {
                        var p = res.data;
                        $("#imgsrc").val(p.src);
                        $("#ShowVideo").html("");
                    } else {
                        layer.message("上传失败,请重试");
                    }
                }
            });

console.file(file)

C# controller 控制台接收上传文件（视频，文件，图片） 方法

 public JsonResult UploadVideo()
        {
            var result = new Dictionary<string, object>();
            result["code"] = -1;
            Dictionary<string, object> data = new Dictionary<string, object>();
            string ENo = Enterprise.EnterpriseNo;
            try
            {
                //string editor = Request["e"];//e=1，表示editor
                string t = Request["t"];//类型，img，表示图片类的，file表示文件类
                string selfPath = Request["p"];//自定义文件夹名称
                var file = Request.Files[0]; //获取选中文件  
                Stream stream = file.InputStream;    //将文件转为流 
                string ext = file.FileName.Substring(file.FileName.LastIndexOf('.'));

                //文件保存位置及命名，精确到毫秒并附带一组随机数，防止文件重名，数据库保存路径为此变量  
                string dir = "/Upload/" + ENo + "/TTVideo/";
                string rootPath = Server.MapPath(dir);
                if (!Directory.Exists(rootPath))
                    Directory.CreateDirectory(rootPath);
                Random ran = new Random((int)DateTime.Now.Ticks);//利用时间种子解决伪随机数短时间重复问题  
                string fileName = DateTime.Now.ToString("mmssms") + ran.Next(99999);
                string serverPath = dir + fileName + ext;

                //路径映射为绝对路径  
                string path = Server.MapPath(serverPath);
                if (t == "img")
                {
                    System.Drawing.Image img = System.Drawing.Image.FromStream(stream);//将流中的图片转换为Image图片对象  
                    img.Save(path, System.Drawing.Imaging.ImageFormat.Jpeg);//图片保存，JPEG格式图片较小  
                }
                else
                {
                    file.SaveAs(path);
                    data.Add("src", serverPath);
                    data.Add("title", fileName);
                    result["data"] = data;
                    result["code"] = 0;
                }
            }
            catch (Exception ex)
            {
                result["code"] = -1;
                LogerHelper.Error(ex);
            }
            return Json(result, JsonRequestBehavior.AllowGet);
    }

TIP：很多网站中的选择上传相关视频，打开文件之后只会显示该文件下所有的视频信息，不会出现其他的图片或者Word文件等信息，可设置参数acceptMIne：‘imag/*’[video/* ] 具体接收类型可参考：https://www.w3school.com.cn/media/media_mimeref.asp