AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

kindeditor-4.1.10 结合 Asp.Net MVC 添加图片功能

2014-03-13 859
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 　　KindEditor是一套开源的HTML可视化编辑器，现在我要结合Asp.Net MVC4 上传图片功能，做相应的配置和修改， 其实网上也有人写过类似的文章了，我写出来是以防以后使用的时候出现这样的问题，所以收集起来做参考之用， 如果有人遇到这样的问题，可以和我一起交流，qq号在我博客上已经贴出来了。

　　KindEditor是一套开源的HTML可视化编辑器，现在我要结合Asp.Net MVC4 上传图片功能，做相应的配置和修改，

其实网上也有人写过类似的文章了，我写出来是以防以后使用的时候出现这样的问题，所以收集起来做参考之用，

如果有人遇到这样的问题，可以和我一起交流，qq号在我博客上已经贴出来了。

下面就开始贴出我的源代码：

js:

var keditor;
var koption = {
    allowFileManager: true, //是否可以浏览上传文件
    allowUpload: true, //是否可以上传
    fileManagerJson: '/KindEditor/ProcessRequest', //浏览文件方法
    uploadJson: '/KindEditor/UploadImage'//上传文件方法(注意这两个路径)
};

KindEditor.ready(function (k) {
    keditor = k.create('#content-js', koption);
    prettyPrint();
});

function btn_submit() {
    var lables = '';
    var title = $("#txt_title").val();
    if (title.length == 0 || keditor.isEmpty()) {
        alert("标题或内容为空！");
        return false;
    }
    $("input[name=lable]:checked").each(function () {
        lables += $(this).val() + ',';
    }); ;
    zwobj.url = "/Manage/AddArticle";
    zwobj.data = { title: title,
        content: encodeURI(keditor.html()),
        lables: lables.substr(0, lables.length - 1)
    };
    ajaxData();
    return true;
}

　　aspx:

<%@ Page Language="C#" EnableEventValidation="false" ValidateRequest="false" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<%@ Import Namespace="MyMvc4Project.Dal.Views" %>
<!DOCTYPE html>
<html>
<head runat="server">
    <meta name="viewport" content="width=device-width" />
    <title>NewArticle</title>
    <link href="../../Scripts/kindeditor-4.1.10/themes/default/default.css" rel="stylesheet"
        type="text/css" />
    <link href="../../Scripts/kindeditor-4.1.10/plugins/code/prettify.css" rel="stylesheet"
        type="text/css" />
    <link href="../../Scripts/Lib/Manage/Manage.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/jquery/jquery-1.8.3.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery/jquery.form.js" type="text/javascript"></script>
    <script src="../../Scripts/kindeditor-4.1.10/kindeditor-all-min.js" type="text/javascript"></script>
    <script src="../../Scripts/kindeditor-4.1.10/lang/zh_CN.js" type="text/javascript"></script>
    <script src="../../Scripts/kindeditor-4.1.10/plugins/code/code.js" type="text/javascript"></script>
    <script src="../../Scripts/kindeditor-4.1.10/plugins/code/prettify.js" type="text/javascript"></script>
   <script src="../../Scripts/zwjs.js" type="text/javascript"></script>
    <script src="../../Scripts/Lib/Manage/NewArticle.js" type="text/javascript"></script>
</head>
<body>
    <div class="kedit">
        <form id="form-article" name="form-article" method="POST">
        <p>
            标题：</p>
        <input type="text" id="txt_title" name="title" />
        <p>
            正文：</p>
        <textarea id="content-js" name="content"></textarea>
        <p>
            <% var lable = ViewData["lable"] as IList<LableView>;
               if (lable != null && lable.Count != 0)
               {
                   %>
                   <p>标签：</p>
                   <%
                   foreach (var view in lable)
                   {%>
            <input class="chk-lable" name="lable" type="checkbox" value="<%= view.Name %>" ><%= view.Name %></input>
            <%} %>
            <% }
               else
               { %>
               <p>无标签</p>
            <% } %>
        </p>
        <p>
            <input id="btn-submit" type="submit" value="发布" onclick="btn_submit()" />
            <input id="btn-cancel" type="button" value="取消" /></p>
        </form>
    </div>
</body>
</html>

　XXXController.cs

using System;
using System.Collections;
using System.Collections.Generic;
using System.Globalization;
using System.IO;
using System.Linq;
using System.Text;
using System.Text.RegularExpressions;
using System.Web;
using NHibernate;
using System.Web.Mvc;
using MyMvc4Project.Infrastructure.Helpers;
using MyMvc4Project.Dal.Implementation;
using MyMvc4Project.Service;

namespace MyMvc4Project.Controllers
{
    public class KindEditorController : Controller
    {
        [HttpPost]
        public ActionResult UploadImage()
        {
            string savePath = "/UploadImages/";
            string saveUrl = "/UploadImages/";
            string fileTypes = "gif,jpg,jpeg,png,bmp";
            int maxSize = 1000000;

            Hashtable hash = new Hashtable();

            HttpPostedFile file = System.Web.HttpContext.Current.Request.Files["imgFile"];
            if (file == null)
            {
                hash = new Hashtable();
                hash["error"] = 1;
                hash["message"] = "请选择文件";
                return Json(hash, "text/html;charset=UTF-8");
            }

            string dirPath = System.Web.HttpContext.Current.Server.MapPath(savePath);
            if (!Directory.Exists(dirPath))
            {
                hash = new Hashtable();
                hash["error"] = 1;
                hash["message"] = "上传目录不存在";
                return Json(hash, "text/html;charset=UTF-8");
            }

            string fileName = file.FileName;
            string fileExt = Path.GetExtension(fileName).ToLower();

            ArrayList fileTypeList = ArrayList.Adapter(fileTypes.Split(','));

            if (file.InputStream == null || file.InputStream.Length > maxSize)
            {
                hash = new Hashtable();
                hash["error"] = 1;
                hash["message"] = "上传文件大小超过限制";
                return Json(hash, "text/html;charset=UTF-8");
            }

            if (string.IsNullOrEmpty(fileExt) || Array.IndexOf(fileTypes.Split(','), fileExt.Substring(1).ToLower()) == -1)
            {
                hash = new Hashtable();
                hash["error"] = 1;
                hash["message"] = "上传文件扩展名是不允许的扩展名";
                return Json(hash, "text/html;charset=UTF-8");
            }

            string newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + fileExt;
            string filePath = dirPath + newFileName;
            file.SaveAs(filePath);
            string fileUrl = saveUrl + newFileName;

            hash = new Hashtable();
            hash["error"] = 0;
            hash["url"] = fileUrl;

            return Json(hash, "text/html;charset=UTF-8");
        }

        public ActionResult ProcessRequest()
        {
            //String aspxUrl = context.Request.Path.Substring(0, context.Request.Path.LastIndexOf("/") + 1);

            //根目录路径，相对路径
            String rootPath = "/UploadImages/";
            //根目录URL，可以指定绝对路径，
            String rootUrl = "/UploadImages/";
            //图片扩展名
            String fileTypes = "gif,jpg,jpeg,png,bmp";

            String currentPath = "";
            String currentUrl = "";
            String currentDirPath = "";
            String moveupDirPath = "";

            //根据path参数，设置各路径和URL
            String path = System.Web.HttpContext.Current.Request.QueryString["path"];
            path = String.IsNullOrEmpty(path) ? "" : path;
            if (path == "")
            {
                currentPath = System.Web.HttpContext.Current.Server.MapPath(rootPath);
                currentUrl = rootUrl;
                currentDirPath = "";
                moveupDirPath = "";
            }
            else
            {
                currentPath = System.Web.HttpContext.Current.Server.MapPath(rootPath) + path;
                currentUrl = rootUrl + path;
                currentDirPath = path;
                moveupDirPath = Regex.Replace(currentDirPath, @"(.*?)[^\/]+\/$", "$1");
            }

            //排序形式，name or size or type
            String order = System.Web.HttpContext.Current.Request.QueryString["order"];
            order = String.IsNullOrEmpty(order) ? "" : order.ToLower();

            //不允许使用..移动到上一级目录
            if (Regex.IsMatch(path, @"\.\."))
            {
                System.Web.HttpContext.Current.Response.Write("Access is not allowed.");
                System.Web.HttpContext.Current.Response.End();
            }
            //最后一个字符不是/
            if (path != "" && !path.EndsWith("/"))
            {
                System.Web.HttpContext.Current.Response.Write("Parameter is not valid.");
                System.Web.HttpContext.Current.Response.End();
            }
            //目录不存在或不是目录
            if (!Directory.Exists(currentPath))
            {
                System.Web.HttpContext.Current.Response.Write("Directory does not exist.");
                System.Web.HttpContext.Current.Response.End();
            }

            //遍历目录取得文件信息
            string[] dirList = Directory.GetDirectories(currentPath);
            string[] fileList = Directory.GetFiles(currentPath);

            switch (order)
            {
                case "size":
                    Array.Sort(dirList, new NameSorter());
                    Array.Sort(fileList, new SizeSorter());
                    break;
                case "type":
                    Array.Sort(dirList, new NameSorter());
                    Array.Sort(fileList, new TypeSorter());
                    break;
                case "name":
                default:
                    Array.Sort(dirList, new NameSorter());
                    Array.Sort(fileList, new NameSorter());
                    break;
            }

            Hashtable result = new Hashtable();
            result["moveup_dir_path"] = moveupDirPath;
            result["current_dir_path"] = currentDirPath;
            result["current_url"] = currentUrl;
            result["total_count"] = dirList.Length + fileList.Length;
            List<Hashtable> dirFileList = new List<Hashtable>();
            result["file_list"] = dirFileList;
            for (int i = 0; i < dirList.Length; i++)
            {
                DirectoryInfo dir = new DirectoryInfo(dirList[i]);
                Hashtable hash = new Hashtable();
                hash["is_dir"] = true;
                hash["has_file"] = (dir.GetFileSystemInfos().Length > 0);
                hash["filesize"] = 0;
                hash["is_photo"] = false;
                hash["filetype"] = "";
                hash["filename"] = dir.Name;
                hash["datetime"] = dir.LastWriteTime.ToString("yyyy-MM-dd HH:mm:ss");
                dirFileList.Add(hash);
            }
            for (int i = 0; i < fileList.Length; i++)
            {
                FileInfo file = new FileInfo(fileList[i]);
                Hashtable hash = new Hashtable();
                hash["is_dir"] = false;
                hash["has_file"] = false;
                hash["filesize"] = file.Length;
                hash["is_photo"] = (Array.IndexOf(fileTypes.Split(','), file.Extension.Substring(1).ToLower()) >= 0);
                hash["filetype"] = file.Extension.Substring(1);
                hash["filename"] = file.Name;
                hash["datetime"] = file.LastWriteTime.ToString("yyyy-MM-dd HH:mm:ss");
                dirFileList.Add(hash);
            }
            //Response.AddHeader("Content-Type", "application/json; charset=UTF-8");
            //context.Response.Write(JsonMapper.ToJson(result));
            //context.Response.End();
            return Json(result, "text/html;charset=UTF-8", JsonRequestBehavior.AllowGet);
        }

        public class NameSorter : IComparer
        {
            public int Compare(object x, object y)
            {
                if (x == null && y == null)
                {
                    return 0;
                }
                if (x == null)
                {
                    return -1;
                }
                if (y == null)
                {
                    return 1;
                }
                FileInfo xInfo = new FileInfo(x.ToString());
                FileInfo yInfo = new FileInfo(y.ToString());

                return xInfo.FullName.CompareTo(yInfo.FullName);
            }
        }

        public class SizeSorter : IComparer
        {
            public int Compare(object x, object y)
            {
                if (x == null && y == null)
                {
                    return 0;
                }
                if (x == null)
                {
                    return -1;
                }
                if (y == null)
                {
                    return 1;
                }
                FileInfo xInfo = new FileInfo(x.ToString());
                FileInfo yInfo = new FileInfo(y.ToString());

                return xInfo.Length.CompareTo(yInfo.Length);
            }
        }

        public class TypeSorter : IComparer
        {
            public int Compare(object x, object y)
            {
                if (x == null && y == null)
                {
                    return 0;
                }
                if (x == null)
                {
                    return -1;
                }
                if (y == null)
                {
                    return 1;
                }
                FileInfo xInfo = new FileInfo(x.ToString());
                FileInfo yInfo = new FileInfo(y.ToString());

                return xInfo.Extension.CompareTo(yInfo.Extension);
            }
        }
    }
}

　　

总结：

　　要注意

var koption = {
allowFileManager: true, //是否可以浏览上传文件
allowUpload: true, //是否可以上传
fileManagerJson: '/KindEditor/ProcessRequest', //浏览文件方法
uploadJson: '/KindEditor/UploadImage'//上传文件方法(注意这两个路径)
};

的配置，尤其是fileManagerJson和uploadJson的地址写法，最后就是关于

hash = new Hashtable();
hash["success"] = true;
hash["url"] = fileUrl;
hash["msg"] = "上传成功";
return Json(hash, "text/html;charset=UTF-8");

hashtable 返回时的参数写法

如果是失败的话，当然要返回hash["error"]=1，这些你都要注意。

文章标签：
JavaScript
前端开发
数据格式
JSON
C#
.NET
数据可视化
开发框架
关键词：
.NET mvc
ASP.NET mvc
ASP MVC
mvc功能
mvc图片
awbeci
目录
相关文章
二二*一一
|
3月前
|
开发框架 前端开发 JavaScript
ASP.NET MVC 教程
ASP.NET 是一个使用 HTML、CSS、JavaScript 和服务器脚本创建网页和网站的开发框架。
二二*一一
51 7
Echo_Wish
|
3月前
|
存储 开发框架 前端开发
ASP.NET MVC 迅速集成 SignalR
ASP.NET MVC 迅速集成 SignalR
Echo_Wish
82 0
VipSoft
|
4月前
|
开发框架 前端开发 .NET
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
VipSoft
60 0
代码掌控者
|
4月前
|
开发框架 前端开发 安全
ASP.NET MVC 如何使用 Form Authentication?
ASP.NET MVC 如何使用 Form Authentication?
代码掌控者
76 0
VipSoft
|
4月前
|
开发框架 .NET
Asp.Net Core 使用X.PagedList.Mvc.Core分页 & 搜索
Asp.Net Core 使用X.PagedList.Mvc.Core分页 & 搜索
VipSoft
151 0
优惠券发放
|
前端开发 数据安全/隐私保护
net MVC中的模型绑定、验证以及ModelState
net MVC中的模型绑定、验证以及ModelState 模型绑定 模型绑定应该很容易理解，就是传递过来的数据，创建对应的model并把数据赋予model的属性，这样model的字段就有值了。
优惠券发放
1699 0
亚丁号
|
7月前
|
开发框架 前端开发 .NET
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
亚丁号
214 0
源码宝
|
7月前
|
开发框架 前端开发 JavaScript
JavaScript云LIS系统源码ASP.NET CORE 3.1 MVC + SQLserver + Redis医院实验室信息系统源码 医院云LIS系统源码
实验室信息系统（Laboratory Information System，缩写LIS）是一类用来处理实验室过程信息的软件，云LIS系统围绕临床，云LIS系统将与云HIS系统建立起高度的业务整合，以体现“以病人为中心”的设计理念，优化就诊流程，方便患者就医。
源码宝
87 0
GoodTime
|
7月前
|
开发框架 前端开发 .NET
C# .NET面试系列六：ASP.NET MVC
<h2>ASP.NET MVC #### 1. MVC 中的 TempData\ViewBag\ViewData 区别? 在ASP.NET MVC中，TempData、ViewBag 和 ViewData 都是用于在控制器和视图之间传递数据的机制，但它们有一些区别。 <b>TempData：</b> 1、生命周期 ```c# TempData 的生命周期是短暂的，数据只在当前请求和下一次请求之间有效。一旦数据被读取，它就会被标记为已读，下一次请求时就会被清除。 ``` 2、用途 ```c# 主要用于在两个动作之间传递数据，例如在一个动作中设置 TempData，然后在重定向到另
GoodTime
365 5
老码识途
|
存储 开发框架 前端开发
[回馈]ASP.NET Core MVC开发实战之商城系统(五)
经过一段时间的准备，新的一期【ASP.NET Core MVC开发实战之商城系统】已经开始，在之前的文章中，讲解了商城系统的整体功能设计，页面布局设计，环境搭建，系统配置，及首页【商品类型，banner条，友情链接，降价促销，新品爆款】，商品列表页面，商品详情等功能的开发，今天继续讲解购物车功能开发，仅供学习分享使用，如有不足之处，还请指正。
老码识途
176 0

热门文章

最新文章

  • 1
    Spring MVC中的请求映射：@RequestMapping注解深度解析
  • 2
    Spring MVC中的控制器：@Controller注解全解析
  • 3
    Spring MVC：深入理解与应用实践
  • 4
    探索Spring MVC：@Controller注解的全面解析
  • 5
    Spring MVC核心：深入理解@RequestMapping注解
  • 6
    （已解决）Linux环境—bash: wget: command not found； Docker pull报错Error response from daemon: Get https://registry-1.docker.io/v2/: net/http: request canceled
  • 7
    【Azure Function App】Azure Function 从.Net6 升级到 .Net8 后 Function出现运行时版本错误
  • 8
    基于云效 Windows 构建环境和 Nuget 制品仓库进行 .Net 应用开发
  • 9
    Benchmark.NET：让 C# 测试程序性能变得既酷又简单
  • 10
    驾驭Autofac，ASP.NET WebApi实现依赖注入详细步骤总结
  • 1
    .net HTTP请求类封装
    42
  • 2
    （已解决）Linux环境—bash: wget: command not found； Docker pull报错Error response from daemon: Get https://registry-1.docker.io/v2/: net/http: request canceled
    123
  • 3
    C#进阶-ASP.NET WebForms调用ASMX的WebService接口
    30
  • 4
    基于云效 Windows 构建环境和 Nuget 制品仓库进行 .Net 应用开发
    70
  • 5
    简化 ASP.NET Core 依赖注入（DI）注册-Scrutor
    37
  • 6
    Net使用EasyNetQ简化与RabbitMQ的交互
    27
  • 7
    NET任务调度框架Hangfire使用指南
    41
  • 8
    【Azure Function App】Azure Function 从.Net6 升级到 .Net8 后 Function出现运行时版本错误
    88
  • 9
    .net8 Syncfusion生成pdf/doc/xls/ppt最新版本
    42
  • 10
    Benchmark.NET：让 C# 测试程序性能变得既酷又简单
    68

    • 相关课程

    更多
  • JSP快速入门
  • Python Web 框架 Django 快速入门
  • Java Web项目实战 - 图书商城
  • Java Web开发-Web应用、Tomcat、HTTP请求与响应

    • 相关电子书

    更多
  • Java Spring Boot开发实战系列课程【第7讲】：Spring Boot 2.0安全机制与MVC身份验证实战(Java面试题)
  • 从Web到Cloud App——YunOS Web App 开发经验分享
  • 低代码开发师（初级）实战教程

    • 相关实验场景

    更多
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • WEB网页编程实战
    • 下一篇
    DataWorks售前咨询