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

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

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:

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 { ) %>
    </div>