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();只需要給非同步參數傳遞這個方法即可實現得到文字框中值，詳細的代碼可以參考My Code。

　　(6)第五步：效果展示

　　1)添加效果

　　　　

　　2)修改效果　

　　　　

　　至此：圖片上傳和富文字編輯器的使用功能就完成了，如果大家有什麼疑惑或者還有什麼不懂的，可以到我們的部落格園小組“青春代碼”，網址是：http://home.cnblogs.com/group/heimaThree/，給我們留言，我們共同解決，也可以在下面留言，那樣只有我一個人回資訊了！希望大家能夠支援我們的部落格園小組，將部落格圓小組打造成一個交流技術的天堂。

項目：http://download.csdn.net/detail/hanyinglong/4789850