ASP.NET MVC异步上传图片和富文本编辑器的使用详解

　　前言：在我们做任何网站项目的时候都避免不了要使用到这两个技术，而且应用也是非常的广泛，所以我写了这篇博客，喜欢能帮到大家，也顺便给我自己坐一下笔记，方便我以后的使用，废话不多说了，先说图片上传吧，图片上传我使用的是异步上传，下来再说富文本编辑器的使用

1. 图片上传

　　(1)第一步：准备工作

　　因为我做的是异步上传图片，所以大家肯定知道啦，需要一些准备工作的，首先我们给我们的项目添加两个引用，第一个引用想必大家都知道的，第二个引用是实现异步上传图片的一个JS脚本，我们需要引入，如果没有的话可以去网上下载或者在我的项目里面也能找到，代码如下：

    <script src="http://www.cnblogs.com/Scripts/jquery-1.7.1.js"></script>

    @*实现异步上传图片的功能*@

    <script src="http://www.cnblogs.com/Scripts/MyAjaxForm.js"></script>

　　(2)第二步：设置上传图片的控件和HTML的主要代码，如下所示：

　　　　

　　注释：大家看到了Form表单里面的那几个属性了吗？enctype我们必须设置成后面的属性才允许我们上传图片，anction的请求地址就是我们在控制器中的操作方法，一会会说到,至于其它的代码想必大家都一定很清楚了。

　　(3)第三步：发送异步请求，当我们准备完这些的时候我们就需要发送异步请求向后台传递参数了，代码截图如下：

　　　　

　　注释，在这段代码里面我们可以看到我定义了一个var imgFileName,这是干什么的呢？其实大家一看注释就知道了，因为我会从后台传递过来图片的路径，所以这个变量就是保存图片的路径的，当我们将图片路径保存到这个变量的时候，在下面我们可以看到它的调用方式，想必大家一看就清楚了

　　(4)第四步：控制器里面的代码如下：这段代码也很简单吧，就是将图片保存到磁盘上面并且返回图片的路径就OK了。

   　　//异步上传图片

  　　 public ActionResult FileUpload()

　　{

   　　 //保存上传的图片

   　　 HttpPostedFileBase imgFile = Request.Files[0];

   　　 //返回图片地址

   　　 imgFile.SaveAs(Server.MapPath("../photo/" + imgFile.FileName));

   　　 return Content("/photo/" + imgFile.FileName);

　　 }            

　　(5) 第五步：注意事项：

　　注意当我们上传图片到磁盘的时候，不要在Views文件夹下面建立文件夹存放图片。

　　(6)效果展示　　

　　　　

　　　　

2. 富文本编辑器的使用

　　注释：这个我还是和前面图片上传一样，通过步骤一步一步的来说吧。如果哪里写的模糊不清大家可以给我提出来！

　　(1)第一步：准备工作，首先我们从网上下载到我们所需要的富文本编辑器的JS代码等文件，

　　我遇到很多人将下载下来的东西不完全的放到项目里面，导致有时候一些功能不能用，调试大半天才找到，我的建议就是，当我们使用别人的东西的时候，我们刚开始先将人家的东西全部放到里面，然后当我们项目完成的时候我们在慢慢的删掉那些没用的东西，反正这样我是很少遇到问题，不知道大家都是怎么解决的？将所有的富文本编辑器的东西放到我们的项目里面去，如图所示：

　　　　

　　然后我们在项目中引入我们所需要的富文本编辑器的JS代码来使用它，注意路径一定要正确，代码如下：

  　　 @*引入富文本编辑器的使用*@

   　　<script src="http://www.cnblogs.com/kindeditor-4.1.3/kindeditor.js"></script>

   　　<script src="http://www.cnblogs.com/kindeditor-4.1.3/lang/zh_CN.js"></script>

  　　<script src="http://www.cnblogs.com/kindeditor-4.1.3/plugins/code/prettify.js"></script>

　　(2)第二步：HTML文本框的代码书写，这个也很简单的，我们直接使用TextBox文本框就行了，代码如下：

  　　 <tr>

       　　<td>内容：</td>

     　　  <td>

        　　   <textarea id="txtMainContent" name="AddNewsContent" style="width: 550px; height: 300px; visibility: hidden;" runat="server">

            　　</textarea>

       　　 </td>

　　 </tr>

　　(4)第三步：JS脚本的编写

　　　　

　　注释：里面我认为比较模糊的地方我都已经加了注释，如果大家认为哪里还不清楚的话，可以给我留言，我们共同研究。

　　(5)第四步：如何获取富本框的值和修改富文本框的值，在上面的截图中虽然已经有了那两个方法，但是因为我们使用富文本编辑器就是为了能够读取富文本编辑器中的值添加到数据库或者将数据库中的值读取出来现世在富文本编辑器中，下面我就简单的介绍一下哈。

  　　//获取添加文本框内容

  　　function getEditorAddData() {

     　　return editorUpdate.html();     //使用上面定义的window.editorAdd的方法的HTML代码   韩迎龙注释

  　　}

　　 //给富文本框赋值

　　 function setEditorUpdateData(data) {

     　　 editorUpdate.html(data);   //富文本框的使用方法:window.editorUpdate   韩迎龙注释

  　　 }

　　当我们使用的时候我们如何来使用呢？ txtMainContent: getEditorAddData();只需要给异步参数传递这个方法即可实现得到文本框中值，详细的代码可以参考我的代码。

　　(6)第五步：效果展示

　　1)添加效果

　　　　

　　2)修改效果　

　　　　

　　至此：图片上传和富文本编辑器的使用功能就完成了，如果大家有什么疑惑或者还有什么不懂的，可以到我们的博客园小组“青春代码”，网址是：http://home.cnblogs.com/group/heimaThree/，给我们留言，我们共同解决，也可以在下面留言，那样只有我一个人回信息了！希望大家能够支持我们的博客园小组，将博客圆小组打造成一个交流技术的天堂。

项目下载地址：http://download.csdn.net/detail/hanyinglong/4789850