KindEditor上传本地图片在ASP.NET MVC的配置

http://www.cnblogs.com/upupto/archive/2010/08/24/1807202.html

本文解决KindEditor上传本地图片在ASP.NET MVC中的配置。

• 开发工具：VS 2010 EN
• 开发语言：Visual C#
• ASP.NET MVC 2.0
• kindeditor-3.5-zh_CN 下载

文中以Blog文章为例，为做演示，数据表比较简单，如下图：

添加 BlogController

Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184

public  class  BlogController : Controller {      BlogContainer blogContainer = new  BlogContainer();        //      // GET: /Blog/        public  ActionResult Index()      {          return  View(blogContainer.Blogs);      }        //      // GET: /Blog/Details/5        public  ActionResult Details( int  id)      {          var  blog = blogContainer.Blogs.SingleOrDefault(b => b.Id == id);            return  View(blog);      }        //      // GET: /Blog/Create        public  ActionResult Create()      {          return  View();      }        //      // POST: /Blog/Create        [HttpPost]      [ValidateInput( false )]      public  ActionResult Create(Blog blog)      {          try          {              // TODO: Add insert logic here              if  (ModelState.IsValid)              {                  blogContainer.AddToBlogs(blog);                  blogContainer.SaveChanges();              }                return  RedirectToAction( "Index" );          }          catch          {              return  View();          }      }        //      // GET: /Blog/Edit/5        public  ActionResult Edit( int  id)      {          var  blog = blogContainer.Blogs.SingleOrDefault(b => b.Id == id);            return  View(blog);      }        //      // POST: /Blog/Edit/5        [HttpPost]      [ValidateInput( false )]      public  ActionResult Edit( int  id, FormCollection collection)      {          try          {              // TODO: Add update logic here              if  (ModelState.IsValid)              {                  var  blog = blogContainer.Blogs.SingleOrDefault(b => b.Id == id);                  UpdateModel(blog, collection);                  blogContainer.SaveChanges();                    return  RedirectToAction( "Index" );              }              else              {                  return  View();              }          }          catch          {              return  View();          }      }        //      // GET: /Blog/Delete/5        public  ActionResult Delete( int  id)      {          var  blog = blogContainer.Blogs.SingleOrDefault(b => b.Id == id);          blogContainer.Blogs.DeleteObject(blog);          blogContainer.SaveChanges();            return  RedirectToAction( "Index" );      }        //      // POST: /Blog/Delete/5        [HttpPost]      public  ActionResult Delete( int  id, FormCollection collection)      {          try          {              // TODO: Add delete logic here                return  RedirectToAction( "Index" );          }          catch          {              return  View();          }      }        [HttpPost]      public  ActionResult UploadImage()      {          string  savePath = "../Content/Images/" ;          string  saveUrl = "http://www.cnblogs.com/Content/Images/" ;          string  fileTypes = "gif,jpg,jpeg,png,bmp" ;          int  maxSize = 1000000;            Hashtable hash = new  Hashtable();            HttpPostedFileBase file = Request.Files[ "imgFile" ];          if  (file == null )          {              hash = new  Hashtable();              hash[ "error" ] = 0;              hash[ "url" ] = "请选择文件" ;              return  Json(hash);          }            string  dirPath = Server.MapPath(savePath);          if  (!Directory.Exists(dirPath))          {              hash = new  Hashtable();              hash[ "error" ] = 0;              hash[ "url" ] = "上传目录不存在" ;              return  Json(hash);          }            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" ] = 0;              hash[ "url" ] = "上传文件大小超过限制" ;              return  Json(hash);          }            if  ( string .IsNullOrEmpty(fileExt) || Array.IndexOf(fileTypes.Split( ',' ), fileExt.Substring(1).ToLower()) == -1)          {              hash = new  Hashtable();              hash[ "error" ] = 0;              hash[ "url" ] = "上传文件扩展名是不允许的扩展名" ;              return  Json(hash);          }            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" );;      } }

在Create.aspx中添加 KindEditor的引用

 

    <script src="http://www.cnblogs.com/Scripts/KindEditor/kindeditor.js" charset="utf-8" type="text/javascript"></script>
    <script type="text/javascript">
        KE.show({
            id: 'editor',
            imageUploadJson: '/Blog/UploadImage'
        });
    </script>

• id：对应textarea id
• imageUploadJson：提供上传图片的处理程序，这里指向 Blog中的UploadImage

表单内容如下：

 

<% using (Html.BeginForm())
       {%>
    <%: Html.ValidationSummary(true) %>
    <fieldset>
        <legend>Fields</legend>
        <div class="editor-label">
            <%: Html.LabelFor(model => model.Title) %>
        </div>
        <div class="editor-field">
            <%: Html.TextBoxFor(model => model.Title) %>
            <%: Html.ValidationMessageFor(model => model.Title) %>
        </div>
        <div class="editor-label">
            <%: Html.LabelFor(model => model.Content) %>
        </div>
        <div class="editor-field">
            <%: Html.TextAreaFor(model => model.Content, new { id="editor",rows="15",cols="85"})%>
            <%: Html.ValidationMessageFor(model => model.Content) %>
        </div>
        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
    <% } %>
    <div>
        <%: Html.ActionLink("Back to List", "Index") %>
    </div>

 

以上实现方法参考官方包中的upload_json.ashx实现，关键在 Json格式

 

源代码：下载