asp.net mvc 上传到服务器 图片不显示,ASP.NET MVC5 使用wangeditor，以及图像上传

wangeditor基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费。听到这样的介绍，当然难免心动，于是决定在新的项目里面使用wangeditor。

新建项目

打开Visual Studio 2015，新建一个项目，取名为Editor。选择模板为Empty，"为以下添加文件夹和核心引用"把MVC的勾给点上，这就添加了一个最简单的轻量的MVC项目。

新建MVC项目模板

安装Nuget插件

因为要使用到wangeditor，所以就需要JQuery，说不定也会用上Bootstrap。所以我们在Nuget上直接搜索Bootstrap就可以了。右击解决方案的项目，如下图所示搜索Bootstrap：

Nuget上直接搜索Bootstrap

安装Bootstrap的同时，也会自动安装JQuery。

安装Optimization，MSDN是这样介绍Optimization的：通过减少对服务器的请求数目并降低所请求的资产(例如，CSS 和 JavaScript 文件)的大小，使用 System.Web.Optimization 程序集中的命名空间和类来提高 Web 应用程序性能。

右击Controllers文件夹，添加一个新的控制器，取名为HomeController。

创建模板

下面，我们来创建一个模板的母页面。右击解决方案的View文件夹，新建文件夹Shared，再新建一个视图，取名为_Layout

源代码清单：

下面首先为这个模板页面添加css和js文件。

右击App_Start文件夹新建一个名为BundleConfig的类，我们将一些常用的CSS组合和JS文件进行简单的打包，代码如下：

using System.Web;

using System.Web.Optimization;

namespace Editor

{

public class BundleConfig

{

public static void RegisterBundles(BundleCollection bundles)

{

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(

"~/Scripts/jquery-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(

"~/Scripts/jquery.validate*"));

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(

"~/Scripts/bootstrap.js",

"~/Scripts/respond.js"));

bundles.Add(new StyleBundle("~/Content/css").Include(

"~/Content/bootstrap.css",

"~/Content/site.css"));

}

}

}

修改Global.asax.cs文件

using System.Web.Optimization;

protected void Application_Start() {

...

BundleConfig.RegisterBundles(BundleTable.Bundles);

...

}

在View文件夹中的WEB.CONFIG增加文件：

......

然后我们再回到_Layout视图，为它增添CSS和JS文件。

@Styles.Render("~/Content/css")

@Scripts.Render("~/bundles/modernizr")

@Scripts.Render("~/bundles/jquery")

右击HomeController文件中的Index()部分，新建一个Index视图，我们将在这个视图里面显示wangeditor的界面。

安装wangeditor

在下载的文件夹中找到dist文件夹，文件夹内容如下：

注意：其中的fonts文件夹必须存在，而且要和css放在一个目录下

在我们的项目里面CSS文件是放在Content 文件夹里面的，所以要把wangEditor.min.css拖到Content 文件夹里面，然后再把 fonts 文件夹也复制到 Content 里面。

把wangEditor.min.js放到项目的Scripts 文件夹里面去，完成这次手动安装。

再次打开BundleConfig.cs，我们要将刚才安装进来的css、js引用到项目里面来，增加以下代码：

bundles.Add(new StyleBundle("~/Content/wangEditor").Include(

"~/Content/wangEditor.min.css"));

bundles.Add(new ScriptBundle("~/bundles/wangEditor").Include(

"~/Scripts/wangEditor.min.js",

"~/Scripts/WMedit.js"));

新建WMedit.js，这是一个wangEditor的创建js，相当的简单。

var editor = new wangEditor('textarea1');

editor.create();

打开_Layout视图，我们要将这些CSS,JS引用到视图里面去。

@Styles.Render("~/Content/css")

@Styles.Render("~/Content/wangEditor")

@Scripts.Render("~/bundles/jquery")

@Scripts.Render("~/bundles/wangEditor")

把Index视图做最后的修改：

@{

ViewBag.Title = "Index";

}

Editor 测试

请输入内容...

运行测试，完成了！

wangeditor上传图片

根据官方给的C#上传图片例程，我们来修改一下项目，首先在项目里面新建一个文件夹，取名为ClassFile，再新建一个一般应用程序，取名为up.ashx，作为测试项目，我只要确保文件能够正确的上传就好了，并不要求安全性。

up.ashx.cs原文件：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace Editor.ClassFile

{

///

/// up 的摘要说明

///

public class up : IHttpHandler

{

public void ProcessRequest(HttpContext context)

{

var files = context.Request.Files;

if (files.Count <= 0)

{

return;

}

HttpPostedFile file = files[0];

if (file == null)

{

context.Response.Write("error|file is null");

return;

}

else

{

string path = context.Server.MapPath("~/uploadedFiles/"); //存储图片的文件夹

string originalFileName = file.FileName;

string fileExtension = originalFileName.Substring(originalFileName.LastIndexOf('.'), originalFileName.Length - originalFileName.LastIndexOf('.'));

string currentFileName = (new Random()).Next() + fileExtension; //文件名中不要带中文，否则会出错

//生成文件路径

string imagePath = path + currentFileName;

//保存文件

file.SaveAs(imagePath);

//获取图片url地址

string imgUrl = "/uploadedFiles/" + currentFileName;

//返回图片url地址

context.Response.Write(imgUrl);

return;

}

}

public bool IsReusable

{

get

{

return false;

}

}

}

}

新建项目文件夹：uploadedFiles，顾名思义这是上传文件的文件夹。

最后，修改一下WMedit.js

var editor = new wangEditor('textarea1');

editor.config.uploadImgUrl = '/ClassFile/up.ashx';

editor.config.uploadHeaders = {

'Accept': 'text/x-json'

};

editor.config.hideLinkImg = true;

editor.create();

运行成功，对于一个富文本编辑器来说，防御XSS攻击是非常有必要的，我推荐使用AntiXSS。

综合来说，是个简洁的富文本编辑器。该有的功能基本都有了，更多文档请点击这里查看谢谢大家。转帖的时候请把凉风有兴或者AlexZeng.net进行署名。本文版权声明：自由转载-非商用-非衍生-保持署名(创意共享3.0许可证)