C#使用Layui上传图片，并进行压缩及多图片上传可删除

<style type="text/css">

    .uploader-list {
        margin-left: -15px;
    }

        .uploader-list .info {
            position: relative;
            margin-top: -25px;
            background-color: black;
            color: white;
            filter: alpha(Opacity=80);
            -moz-opacity: 0.5;
            opacity: 0.5;
            width: 100px;
            height: 25px;
            text-align: center;
            display: none;
        }

        .uploader-list .handle {
            position: relative;
            background-color: black;
            color: white;
            filter: alpha(Opacity=80);
            -moz-opacity: 0.5;
            opacity: 0.5;
            width: 100px;
            text-align: right;
            height: 18px;
            margin-bottom: -18px;
            display: none;
        }

            .uploader-list .handle span {
                margin-right: 5px;
            }

                .uploader-list .handle span:hover {
                    cursor: pointer;
                }

        .uploader-list .file-iteme {
            margin: 12px 0 0 15px;
            padding: 1px;
            float: left;
        }
</style>

html：

<div class="fill_sty add_gr_b10">
    <p>商户图片</p>
    <button type="button" class="layui-btn" id="test1" style="margin-top: 10px;">上传图片</button>
    <div class="layui-upload-list">
        <img class="layui-upload-img" style="width: 200px;" id="demo1" src="@Model.Logo">
        <input hidden id="Logo" value="@Model.Logo" />
        <p id="demoText1"></p>
    </div>
</div>
<div class="fill_sty add_gr_b10">
    <p>商户背景</p>
    <button type="button" class="layui-btn" id="test2" style="margin-top: 10px;">上传图片</button>
    <div class="layui-upload-list">
        <img class="layui-upload-img" style="width: 200px;" id="demo2" src="@Model.Background">
        <input hidden id="Background" value="@Model.Background" />
        <p id="demoText2"></p>
    </div>
</div>
<div class="fill_sty add_gr_b10">
    <p>商户图片</p>
    <div class="layui-upload">
        <button type="button" class="layui-btn" id="test3" style="margin-top: 10px;">多图片上传</button>
        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;width: 88%">
            预览图：
            <div class="layui-upload-list uploader-list" style="overflow: auto;" id="uploader-list">
                @{
                    if (!string.IsNullOrEmpty(Model.Banner) && Model.Banner.EndsWith("&"))
                    {
                        string[] list = Model.Banner.Substring(0, Model.Banner.Length - 1).Split('&');

                        for (int i = 0; i < list.Length; i++)
                        {
                            <div id="" class="file-iteme">
                                <div class="handle">
                                    <span class="glyphicon glyphicon-trash">删除</span>
                                </div>
                                <img style="width: 100px;height: 100px;" src="@list[i]">
                                <div class="info">@i</div>
                            </div>
                        }
                    }
                }
            </div>
        </blockquote>
    </div>
</div>

tips:不一定非要是input标签，无论是什么标签，layui upload是根据其 id 值进行操作的

JS：

<script type="text/javascript">
	layui.use(['form', 'layer', 'upload'], function () {
        var form = layui.form,
            layer = layui.layer,
            upload = layui.upload;
        //普通图片上传
        var uploadInst1 = upload.render({
            elem: '#test1'
            , url: '/MemberMobile/Trading/UploadFile'
            , auto: false
            , choose: function (obj) { //选择文件后的回调
                var files = obj.pushFile();
                var filesArry = [];
                for (var key in files) { //将上传的文件转为数组形式
                    filesArry.push(files[key])
                }
                var index = filesArry.length - 1;
                var file = filesArry[index]; //获取最后选择的图片,即处理多选情况

                if (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion.split(";")[1]
                    .replace(/[ ]/g, "").replace("MSIE", "")) < 9) {
                    return obj.upload(index, file)
                }
                canvasDataURL(file, function (blob) {
                    var aafile = new File([blob], file.name, {
                        type: file.type
                    })
                    var isLt1M;
                    if (file.size < aafile.size) {
                        isLt1M = file.size
                    } else {
                        isLt1M = aafile.size
                    }

                    if (isLt1M / 1024 / 1024 > 2) {
                        return layer.alert('上传图片过大！')
                    } else {
                        if (file.size < aafile.size) {
                            return obj.upload(index, file)
                        }
                        obj.upload(index, aafile)
                    }
                })
            }
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                //上传成功
                if (res.src != "" && res.src != null) {
                    $("#Logo").val(res.src);
                }
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText1');
                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();
                });
            }
        });
        var uploadInst2 = upload.render({
            elem: '#test2'
            , url: '/MemberMobile/Trading/UploadFile'
            , auto: false
            , choose: function (obj) { //选择文件后的回调
                var files = obj.pushFile();
                var filesArry = [];
                for (var key in files) { //将上传的文件转为数组形式
                    filesArry.push(files[key])
                }
                var index = filesArry.length - 1;
                var file = filesArry[index]; //获取最后选择的图片,即处理多选情况

                if (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion.split(";")[1]
                    .replace(/[ ]/g, "").replace("MSIE", "")) < 9) {
                    return obj.upload(index, file)
                }
                canvasDataURL(file, function (blob) {
                    var aafile = new File([blob], file.name, {
                        type: file.type
                    })
                    var isLt1M;
                    if (file.size < aafile.size) {
                        isLt1M = file.size
                    } else {
                        isLt1M = aafile.size
                    }

                    if (isLt1M / 1024 / 1024 > 2) {
                        return layer.alert('上传图片过大！')
                    } else {
                        if (file.size < aafile.size) {
                            return obj.upload(index, file)
                        }
                        obj.upload(index, aafile)
                    }
                })
            }
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo2').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                //上传成功
                if (res.src != "" && res.src != null) {
                    $("#Background").val(res.src);
                }
            }
            , 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 () {
                    uploadInst.upload();
                });
            }
        });
        var uploadInst3 = upload.render({
            elem: '#test3'
            , url: '/MemberMobile/Trading/UploadFile'
            , multiple: true
            , auto: false
            , choose: function (obj) { //选择文件后的回调
                var files = obj.pushFile();
                var filesArry = [];
                for (var key in files) { //将上传的文件转为数组形式
                    filesArry.push(files[key])
                }
                var index = filesArry.length - 1;
                var file = filesArry[index]; //获取最后选择的图片,即处理多选情况

                if (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion.split(";")[1]
                    .replace(/[ ]/g, "").replace("MSIE", "")) < 9) {
                    return obj.upload(index, file)
                }
                canvasDataURL(file, function (blob) {
                    var aafile = new File([blob], file.name, {
                        type: file.type
                    })
                    var isLt1M;
                    if (file.size < aafile.size) {
                        isLt1M = file.size
                    } else {
                        isLt1M = aafile.size
                    }

                    if (isLt1M / 1024 / 1024 > 2) {
                        return layer.alert('上传图片过大！')
                    } else {
                        if (file.size < aafile.size) {
                            return obj.upload(index, file)
                        }
                        obj.upload(index, aafile)
                    }
                })
            }
            , before: function (obj) {
                layer.msg('图片上传中...', {
                    icon: 16,
                    shade: 0.01,
                    time: 0
                })
            }
            , done: function (res) {
                layer.close(layer.msg());//关闭上传提示窗口
                //上传完毕
                $('#uploader-list').append(
                    '<div id="" class="file-iteme">' +
                    '<div class="handle"><span class="glyphicon glyphicon-trash">删除</span></div>' +
                    '<img style="width: 100px;height: 100px;" src=' + res.src + '>' +
                    '<div class="info">' + res.name + '</div>' +
                    '</div>'
                );
            }
        });
    });


    /******************************压缩上传图片*******************************/
    //压缩转化为base64
    function canvasDataURL(file, callback) {
        var reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = function (e) {
            const img = new Image()
            const quality = 0.8 // 图像质量
            const canvas = document.createElement('canvas')
            const drawer = canvas.getContext('2d')
            img.src = this.result
            img.onload = function () {
                canvas.width = img.width
                canvas.height = img.height
                drawer.drawImage(img, 0, 0, canvas.width, canvas.height)
                convertBase64UrlToBlob(canvas.toDataURL(file.type, quality), callback);
            }
        }
    }
    //将base64转化为文件格式
    function convertBase64UrlToBlob(urlData, callback) {
        const arr = urlData.split(',')
        const mime = arr[0].match(/:(.*?);/)[1]
        const bstr = atob(arr[1])
        let n = bstr.length
        const u8arr = new Uint8Array(n)
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n)
        }
        callback(new Blob([u8arr], {
            type: mime
        }));
    }
    /******************************压缩上传图片-End*******************************/
</script>

//获取上传图片值
var Logo = $("#Logo").val();
var Background = $("#Background").val();

var Banner = "";
var imglist = $("#uploader-list img");
for (var i = 0; i < imglist.length; i++) {
    var qwe = imglist.eq(i).attr("src");
    console.log(qwe);
    Banner += qwe + "&";
}
if (imglist.length > 4) {
    msg_alert('Banner图最多可上传4张~');
    return;
}

后台代码：

#region 文件上传
/// <summary>
/// 文件上传 -by-mQx
/// </summary>
/// <returns></returns>
public ActionResult UploadFile()
{
    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 = "上传出错"
    });
}
#endregion

或者使用以下方法：

//Controllers
public ActionResult UploadFile()
{
    string url = FileUpload.UpLoad("/upload/images/", Request, Server, 1);
    return Json(new
    {
        src = url,
        name = "",   // 获取文件名不含后缀名
        msg = "上传成功"
    });
}
//cs
public static string UpLoad(string path, HttpRequestBase request, HttpServerUtilityBase server, int urltype)
{
    //上传和返回(保存到数据库中)的路径
    var tempPath = server.MapPath(path);
    if (!Directory.Exists(tempPath))
    {
        Directory.CreateDirectory(tempPath);//不存在就创建目录 
    }
    if (request.Files.Count <= 0) return string.Empty;
    var imgFile = request.Files["file"];
    if (imgFile == null) return "";
    //创建图片新的名称
    var nameImg = DateTime.Now.ToString("yyyyMMddHHmmssfff");
    //获得上传图片的路径
    var strPath = imgFile.FileName;
    //获得上传图片的类型(后缀名)
    var type = strPath.Substring(strPath.LastIndexOf(".", StringComparison.Ordinal) + 1).ToLower();

    //拼写数据库保存的相对路径字符串
    // savepath = "..\\" + path + "\\";
    path += nameImg + "." + type;
    //拼写上传图片的路径
    var uppath = server.MapPath(path);
    // uppath += nameImg + "." + type;
    //上传图片
    imgFile.SaveAs(uppath);
    switch (urltype)
    {
        case 1:
            return path;
        case 2:
            return uppath;
    }
    return string.Empty;
}