Kendo UI头像上传 和 增删改查
来源：互联网 发布：nginx ip hash 编辑：程序博客网 时间：2024/05/16 08:10
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格式的发送数据和接收数据。
话不多说，东西全在代码里。
大家如果还有不懂上传头像（或上传文件）怎么操作的可以给我留言，把您遇到的问题简单描述一下，找我谈人生谈理想的也可以留言哦
！！！
1 0
- Kendo UI头像上传 和 增删改查
- 前台kendo ui js grid框架增删改查
- 二、spring mvc模拟用户增删改查以及登录和上传文件的相关流程
- JavaScript/Jsp 实现对数据库的增删改查和简单的下载上传文件
- 基本表管理和增删改查
- JDBC安装和增删改查基础知识
- hibernate 增删改查和一点hql
- MySQL常用命令和增删改查语句
- Hibernate概述和增删改查入门
- 文件和文件夹的增删改查
- 数据库创建和增删改查
- MyBatis搭建和增删改查(入门)
- oracle和hibernate增删改查
- oracle_1.增删改查和新用户
- Yii和ThinkPHP的增删改查
- Mybatis增删改查和智能标签
- greenDao配置和增删改查
- 对象数组增删改查和继承
- iframe子页面调用父页面方法 跨域 异常 Blocked a frame with origin
- 如何基于报表工具FineReport进行二次开发
- XMLHttpRequest 传递中文 乱码
- 跑jar工程命令：
- 【NOIp 2003】【树结构·搜索】传染病防治
- Kendo UI头像上传 和 增删改查
- java 常用工具类 合集
- windows下配置nginx+php环境
- 常用开发命令行参考
- python怎么看一个类的成员
- android 动画Animation属性大全（-）
- js-视频播放插件Video.js简单使用
- Glide 加载圆形图片CircleImageView遇到的问题
- 欢迎使用CSDN-markdown编辑器
