Kendo UI头像上传和增删改查

最新推荐文章于 2024-06-19 10:31:26 发布

qq_23313625

最新推荐文章于 2024-06-19 10:31:26 发布

阅读量4.5k

点赞数 2

分类专栏： Kendo UI头像上传文章标签： C# csdn ui 图片上传 kendoui

本文链接：https://blog.csdn.net/qq_23313625/article/details/53129640

版权

Kendo UI头像上传专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、首先是Kendo UI的js和Css的引入文件，大家对照着引用即可，引用前台的样式我就不多说了，百度上到处都是！

<html>
<head>
    <title></title>
    <link href="~/Content/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="~/Content/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="~/Content/styles/kendo.rtl.min.css" rel="stylesheet" />
    <link href="~/Content/styles/kendo.dataviz.min.css" rel="stylesheet" />
    <link href="~/Content/styles/kendo.default.mobile.min.css" rel="stylesheet" />
    <link href="~/Content/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
    <script src="~/Scripts/js/jquery.min.js"></script>
    <script src="~/Scripts/js/kendo.all.min.js"></script>
    <script src="~/Scripts/js/kendo.grid.min.js"></script>
    <script src="~/Scripts/js/messages/kendo.messages.zh-CN.min.js"></script>
    <script src="~/Content/js/kendo.editor.min.js"></script>

    <script src="~/Content/js/kendo.web.min.js"></script>
    
    
        <style type="text/css">
        .customer-photo {
            display: inline-block;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-size: 50px 50px;
            background-position: center center;
            vertical-align: middle;
            line-height: 32px;
            box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
            margin-left: 5px;
        }

        .customer-name {
            display: inline-block;
            vertical-align: middle;
            line-height: 32px;
            padding-left: 3px;
        }
    </style>

2、实例化dome操作

我在这里讲的是 Grid 显示列表操作，然后头像上传数据，下面我把注释写详细一些方便大家观看，

<div id="grid"></div>

<script type="text/javascript">
        $(function () {
            $("#grid").kendoGrid({
                dataSource: {
                    serverPaging: true,
                    schema: {
                        total: "Total",
                        model: {
                            id: "SID",
                            fields: {
                                SID: { editable: false, nullable: true }, //editable: false(是否需要编辑) nullable : true,(是否允许为空) 
                                //validation是验证
                                image: {
                                    validation: {
                                        required: true,
                                        //type:"file"
                                    }
                                },
                                sname: { validation: { required: true } },
                                sage: { validation: { required: true } },
                                six: { validation: { required: true } },
                                stel: { validation: { required: true } },
                                address: { validation: { required: true } }
                            }
                        }
                    },
                    dataType: "json",
                    transport: {
                        dataType: "json",
                        read: "/Default1/show",
                        destroy: {
                            url: "/Default1/destroy",//删除
                            dataType: "json"
                        },
                        update: {
                            url: "/Default1/update",//修改
                            dataType: "json"
                        },
                        create: {
                            url: "/Default1/add",//添加
                            dataType: "json"
                        }


                    },
                    pageSize: 20
                },
                height: 550,
                groupable: true,//排序
                sortable: true,//分组
                pageable: {     //分页
                    //refresh: true,
                    pageSizes: true,
                    buttonCount: 5
                },
                toolbar: ["create"],        //添加按钮                 
                columns: [{
                    field: "SID",
                    title: "编号 ",
                    width: 20
                }, {
                    //template: "<div class='customer-photo'" +
                    //                "style='background-image: url(../Content/img/#:data.image#.jpg);'></div>" +
                    //            "<div class='customer-name'></div>",//图片显示


                    field: "image",
                    title: "图 ",
                    width: 50,
                    editor: categoryDropDownEditor


                    , template: "<div class='customer-photo'" +
                                    "style='background-image: url(../Content/img/#:data.image#);'></div>" +
                                "<div class='customer-name'>#:data.image#</div>",//图片显示


                }, {
                    field: "sname", title: "姓名 ",
                    width: 30
                }, {
                    field: "sage",
                    title: "年龄 ",
                    width: 30
                }, {
                    field: "six",
                    title: "性别 ",//性别根据0，1判断输出男 女
                    width: 30,
                    values: [
                        { text: "男", value: 0 },
                        { text: "女", value: 1 },
                    ]
                }
                , {
                    field: "stel", title: "电话 ",
                    width: 50
                }, {
                    field: "address", title: "地址 ",
                    width: 70
                },
                {
                    command: ["edit", "destroy"], title: "操作 ",
                    width: 100
                }
                ],
                editable: {// 设置可以在列表中进行编辑数据
                    // 设置删除时显示的确认信息
                    confirmation: "您确定要进行删除操作吗？",
                    //createAt : "top",// 添加位置，默认是top：从第一行进行添加
                    destroy: true,// 不允许删除
                    mode: "popup",// 设置编辑形式为弹出框(popup)还是在列表中(inline)
                    //template: kendo.template($("#editTemplate").html())//设置弹出框中加载的内容,设置此项mode必须是popup
                },
                /*groupable : {// 设置列表表头
                    messages : {empty : "用户信息列表"}
                },*/
                groupable: false,


                change: function (e) {
                    alert(11);
                    material_id_global = e.sender.selectable.userEvents.currentTarget.cells[0].innerText;




                }


            });


            //上传图片成功后的回调函数
            function uploadPhotoSuccess(e) {
                var objid = e.response;
                //$(update)




            }




            //字段修改格式化 修改框 转换为上传按钮
            function categoryDropDownEditor(container, options) {
                console.info(container);
                $('<input type="hidden" name=UpdateImg>').appendTo(container);
                $('<input type="file" name="' + options.field + '" />')
                    .appendTo(container)
                    .kendoUpload({
                        async: {    //异步上传图片到指定地址中
                            saveUrl: "/Default1/save",
                            removeUrl: "/Default1/remove",
                            autoUpload: true
                        }
                        ,
                        localization: {     //设置上传按钮名称
                            select: "上传预览图片"
                        },
                        success: uploadPhotoSuccess     //上传成功后执行的回调函数


                    });
            }
            $("#files").kendoUpload({
                async: {
                    saveUrl: "/Default1/save",
                    removeUrl: "/Default1/remove",
                    autoUpload: true
                }
            });
        })
    </script>
    
        <script type="text/javascript">


        $(function () {
            $("#dialog").kendoWindow({
                title: "Title",
                width: 500,
                height: 300,
                actions: [
                    "Pin",
                    "Minimize",
                    "Maximize",
                    "Close"
                ],
                modal: false


            });


        })
    </script>

最重要的代码，也是大家最关心的代码，头像上传（也可以是文件上传）的代码，就是上面的代码中的指定部分：

//字段修改格式化 修改框 转换为上传按钮
            function categoryDropDownEditor(container, options) {
                console.info(container);
                $('<input type="hidden" name=UpdateImg>').appendTo(container);//把指定内容存放到container变量中
                $('<input type="file" name="' + options.field + '" />')
                    .appendTo(container)
                    .kendoUpload({
                        async: {    //异步上传图片到指定地址中
                            saveUrl: "/Default1/save",
                            removeUrl: "/Default1/remove",
                            autoUpload: true
                        }
                        ,
                        localization: {     //设置上传按钮名称
                            select: "上传预览图片"
                        },
                        success: uploadPhotoSuccess     //上传成功后执行的回调函数


                    });
            }

以上的方法是在我点上传图片操作时把指定的图片传到后台，然后把后台返回的数据 uploadPhotoSuccess 这个回掉方法去处理并且显示到界面！

这一步非常关键，因为我的后台是用.NET写的，这一步做了访问后台，读取数据到前台界面显示，数据库访问是SQL，用的是.NET中的EF框架，本文不适用于新手。

3、后台代码部分

 public class Default1Controller : Controller
    {
        //
        // GET: /Default1/
        studentDBEntities2 se = new studentDBEntities2();
        public ActionResult Index()
        {
            return View();
        }
        //显示数据
        public ActionResult show()
        {
            var stu = se.stus.ToList();
            return Json(stu, JsonRequestBehavior.AllowGet);
        }
        //删除
        public ActionResult destroy(stu s)
        {
            stu S = se.stus.Find(s.SID);
            se.stus.Remove(S);
            se.SaveChanges();
            return Json(S, JsonRequestBehavior.AllowGet);
        }

        string img = "";
        //修改
        public ActionResult update(stu s)
        {

            stu S = se.stus.Find(s.SID);
            S.SID = s.SID;
            S.image = s.image;
            S.sname = s.sname;
            S.sage = s.sage;
            S.stel = s.stel;
            S.six = s.six;
            S.address = s.address;
            se.SaveChanges();
            return Json(S, JsonRequestBehavior.AllowGet);
        }


        [HttpPost]
        [ValidateInput(false)]
        public string Save(IEnumerable<HttpPostedFileBase> image)
        {

            //  "files"上传组件的名称是“文件”
            if (image != null)
            {
                foreach (var file in image)
                {


                    var fileName = Path.GetFileName(file.FileName);
                    var physicalPath = Path.Combine(Server.MapPath("~/Content/img/"), fileName);
                    //保存到图片路劲
                    file.SaveAs(physicalPath);
                    img = file.FileName;
                    return Newtonsoft.Json.JsonConvert.SerializeObject(img);
                }

            }
            return "";
        }
        //添加
        public ActionResult add(stu s)
        {
            se.stus.Add(s);
            se.SaveChanges();
            return Json(s, JsonRequestBehavior.AllowGet);

        }
        //下载
        public FileStreamResult DownFile(string filePath, string fileName)
        {
            string absoluFilePath = Server.MapPath(System.Configuration.ConfigurationManager.AppSettings["AttachmentPath"] + filePath);
            return File(new FileStream(absoluFilePath, FileMode.Open), "application/octet-stream", Server.UrlEncode(fileName));
        }
    }

这一步也有一个要注意的地方，返回值，返回值一定要是完整的json格式，因为Kendo UI中前台数据和后台数据交互全都是用的json格式，所以大家在传值的时候一定要先想到json格式的发送数据和接收数据。

话不多说，东西全在代码里。

大家如果还有不懂上传头像（或上传文件）怎么操作的可以给我留言，把您遇到的问题简单描述一下，找我谈人生谈理想的也可以留言哦！！！