CKEditor 上傳圖片 MVC

1.點擊上傳圖片，會看到以下圖1，在預覽中出現一段文字，在image.js中會找到該段文字，刪掉便可。便可看到預覽框中沒有了這段文字。

                         

                     （1）                                                          （2）                                          (3)

 2.好，如今準備開始添加上傳功能，在「圖像信息」與「連接」tab後還有一個上傳Tab,一樣在image.js文件中找到id:"Upload",hidden:!0,  將hidden:!0改成,hidden:0

出現了「上傳」Tab.

 

3.下面就該實現上傳的方法了，首先在config.js中添加 config.filebrowserImageUploadUrl = "/FileUpload/Upload"; 後面的  "/FileUpload/Upload" 表示 圖片上傳的後臺處理程序路徑。

4.在FileUploadController中添加圖片上傳處理程序

[HttpPost]
public ActionResult Upload(HttpPostedFileBase upload)
{
var CKEditorFuncNum = System.Web.HttpContext.Current.Request["CKEditorFuncNum"];
if (!upload.ContentType.Contains("image"))
{
return Content("<script type=\"text/javascript\">window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum
+ ",''," + "'文件格式不正確（必須爲.jpg/.gif/.bmp/.png文件）');</script>");
}
else
{
var fileName = System.IO.Path.GetFileName(upload.FileName);
var filePhysicalPath = Server.MapPath("~/upload/" + fileName);//我把它保存在網站根目錄的 upload 文件夾
if (!Directory.Exists(Server.MapPath("~/upload")))
{
Directory.CreateDirectory(Server.MapPath("~/upload"));
}
upload.SaveAs(filePhysicalPath);
var url = "/upload/" + fileName;
//上傳成功後，咱們還須要經過如下的一個腳本把圖片返回到第一個tab選項
return Content("<script>window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ", \"" + url + "\");</script>");
}
}

5.上傳成功後，圖片會顯示在第一個tab的預覽中