layui文件上传&C#上传视频，删除文件

先来看下上传时的效果图
实现功能如下

1. 上传视频
2. 点击播放以及全屏（自带）
3. 删除本地视频

开发工具：visual studio
语言：C#
前端框架：layui

目录：

一、 上传视频（前端）
二、 上传视频（后端）
三、 删除视频（前端）
四、 删除视频（后端）

一、上传视频（前端）

1. 引入layui的css文件和js文件
2. 页面元素代码如下
   主要分为video展示视频，上传按钮，删除按钮。
   视频的展示区域是宽300像素，高200像素，因为有全屏功能，这点区域够用了。

<form class="layui-form" runat="server">
    <div class="layui-form-item">
        <div class="layui-inline">
            <div class="layui-form-item">
                <label class="layui-form-label">视频在线看</label>
                <video src="" controls="controls" id="videoplay" style="width: 300px; height: 200px;"></video>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <div class="layui-form-item">
                <button type="button" class="layui-btn" id="uploadVideo"><i class="layui-icon">&#xe67c;</i>上传视频</button>
                <button type="button" class="layui-btn" id="deleteVideo"><i class="layui-icon"></i>删除视频</button>
            </div>
        </div>
    </div>
</form>

3. js代码如下
   先创建一个upload对象
   然后创建一个上传组件
   上传组件中本次用到的参数说明如下

参数	说明
elem	指向容器选择器，上传视频的按钮
url	服务端上传的接口
accept	指定允许上传时校验的文件类型，可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）
done	执行上传请求后的回调。返回三个参数，分别为：res（服务端响应信息）、index（当前文件的索引）、upload（重新上传的方法，一般在文件上传失败后使用）
error	执行上传请求出现异常的回调（一般为网络异常、URL 404等）。返回两个参数，分别为：index（当前文件的索引）、upload（重新上传的方法）

layui.use(['upload'], function () {
    var upload = layui.upload;//得到 upload 对象
    //创建一个上传组件
    upload.render({
        elem: '#uploadVideo'
        , url: '上传视频Demo.aspx?Action=UploadVideo'
        , accept: 'video' //视频
        , done: function (res) {//上传后的回调
            if (res.code == 10000) {
                $("#videoplay").attr("src", res.data.src);
                layer.msg('上传成功');
            } else {
                layer.msg('上传失败');
            }
        }
        , error: function () {
            //请求异常回调
            layer.msg('上传失败');
        }
    })
})

二、 上传视频（后端）

1. 获取指定虚拟路径对应的物理文件路径
   Server.MapPath()
2. 上传视频文件
   file.SaveAs()

private string UploadVideo()
{
    string strFileName = "";
    Random rad = new Random();//实例化随机数产生器rad；
    int value = rad.Next(1000, 10000);//用rad生成大于等于1000，小于等于9999的随机数；
    string path = Server.MapPath("\\upload\\");//返回与Web服务器上的指定虚拟路径对应的物理文件路径
    if (!Directory.Exists(path))
    {
        Directory.CreateDirectory(path);
    }
    strFileName = DateTime.Now.ToString("yyyyMMddHHmmss") + value + ".mp4";
    HttpPostedFile file = Request.Files[0];
    file.SaveAs(path.Replace('\\', '/') + strFileName);//保存上传的文件

    string data = "{\"src\":\"../upload/" + strFileName + "\"}";
    return "{\"code\":10000,\"data\":" + data + "}";
}

三、 删除视频（前端）

1. 之前已经将页面的元素代码全部贴出
   下方的删除视频按钮单独拎了出来

<button type="button" class="layui-btn" id="deleteVideo"><i class="layui-icon"></i>删除视频</button>

2. js代码如下
   向服务器请求删除视频文件
   然后清空页面的视频展示

//删除视频
$("#deleteVideo").click(function () {
    var url = $("#videoplay").attr("src");
    if (url == '') {
        layer.msg("没有视频你删除个锤子", { icon: 5 });
        return;
    }
    //发出请求 删除视频文件
    $.post({
        url: "上传视频Demo.aspx",
        data: {
            "Action": "DeleteVideo",
            "url": url
        },
        success: function (data) {
            if (data == '-1') {
                layer.msg("没有视频你删除个锤子", { icon: 5 });
            } else if (data == '0') {
                layer.msg("删除成功", { icon: 1 });
            }
        },
        error: function (errorMsg) {

        }
    })
    $("#videoplay").attr("src", "");//清空路径
})

四、 删除视频（后端）

1. 参数验证：首先判断删除的路径存不存在
2. 获取指定虚拟路径对应的物理文件路径
   Server.MapPath()
3. 判断路径是文件夹还是文件，因为文件夹和文件的删除方式是不一样的
   File.GetAttributes()
4. 文件删除
   File.Delete(url);
5. 文件夹删除
   Directory.Delete(url, true);

private string DeleteVideo(string url)
{
    if (string.IsNullOrEmpty(url))
    {
        return "-1";//没有视频你删除个锤子
    }
    string filename = url.Split('/')[2];//获取到文件名
    string path = Server.MapPath("\\upload\\");//返回与Web服务器上的指定虚拟路径对应的物理文件路径
    url = path.Replace('\\', '/') + filename;
    //确定指定的文件是否存在
    if (File.Exists(url))
    {
        //根据路径字符串判断是文件还是文件夹
        FileAttributes attr = File.GetAttributes(url);
        //根据具体类型进行删除
        if (attr == FileAttributes.Directory)
        {
            //删除文件夹以及所有子目录和文件
            Directory.Delete(url, true);
        }
        else
        {
            //删除文件
            File.Delete(url);
        }
    }
    return "1";//删除成功
}