UEditor1.4.3.3實現圖片上傳、刪除功能

1、下載ueditor1.4.3.3 UTF-8的版本

2、新建一個項目，在項目中添加UEditor，把下載好的插件都放在ueditor這個文件夾中，在進行一些基本的配置

3、在根目錄下新建一個為index.aspx的網頁，在進行如下的配置，引用三個js文件，在form表單里面用csript來構造一個頁面，在讓var ue = UE.getEditor("container");來初始化這個頁面。運行后界面都已經出現啦

4、運行index.aspx這個頁面時會報錯，json沒引用之類的，一開始我找了很多方法，后來才看到是沒有添加Newtonsoft.Json.dll的引用，在下載的UEDITOR/net文件的bin文件里找到這個dll動態庫，然后在項目中添加引用。這樣無論是點擊單圖上傳還是多圖上傳都可以啦。那么還有一個問題，這個圖片傳到哪里了呢，就需要更改一下net目錄下的config.json文件

"imageUrlPrefix": " / ", /* 圖片訪問路徑前綴 */
"imagePathFormat": "uploadFile/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */ 

這樣的話，上傳的圖片會保存在根目錄的uploadFile/image/上傳圖片的時間 文件夾中，如果沒有建文件夾也沒關系，會自動生成的。如果覺得圖片保存目錄太深了，也可以自定義上面的圖片文件夾。

圖片訪問路徑前綴一點要為空，不然上傳之后就會出錯，圖片出不來。imagepathFormat里的文件夾是自己新建的，我當時只新建了uploadFile里面的image文件夾自己出現了，還有一個文件就是以日期命名的，如果你不需要在包含文件，就可以把后面的{yyyy}這些日期的都刪了。

5.現在圖片已經可以上傳了。但還有一個功能沒完成，就是刪除功能了，我這里要做的是單個圖片的刪除。

 6.圖片的刪除，首先在線管理欄目的圖片右上角會有刪除一詞出現，現在就來實現吧。我對樣式美感那些把握的不是那么好，所以直接在網上看了好看的例子，用的他的樣式。

找到ueditor\dialogs\image\image.js這個文件，增加了刪除按鈕，是一把x，這時候已經有了刪除的狀態功能，真正實現刪除的功能是仿照了uploadimage.cs文本編輯器里面自帶的一個上傳類，把它改成刪除類。

/* 在這兩句之后添加 */
item.appendChild(img);
item.appendChild(icon);

//增加刪除按鈕
item.appendChild($("<span class='delbtn' url='" + list[i].url + "'>✖</span>").click(function (){
var del = $(this);
try {
window.event.cancelBubble = true; //停止冒泡
window.event.returnValue = false; //阻止事件的默認行為
window.event.preventDefault(); //取消事件的默認行為 
window.event.stopPropagation(); //阻止事件的傳播
} finally {
if (!confirm("確定要刪除嗎？")) return;
$.post(editor.getOpt("serverUrl") + "?action=deleteimage", { "path": del.attr("url") },
function (result) {
if (result.indexOf("文件刪除成功")>-1) {
del.parent().remove();
}

else alert(result);
});
}
})[0]);



/* 在這一句之前添加 */
this.list.insertBefore(item, this.clearFloat);

 

在image.css的文件中加入樣式，刪除的圖標更好看一些，我是放在最后。注：樣式是參考另外一篇文章。

/* 在線管理刪除按鈕樣式 */
#online li .delbtn { 
position: absolute;
top: 0;
right: 0;
border: 0; 
z-index: 3;
color: #ffffff;
display: inline;
font-size: 12px;
line-height: 10.5px;
padding:3px 5px;
text-align: center;
background-color: #d9534f;
}

 刪除類，是自己新建了一個類，放在net/app_code中 DeleteImageHandler.cs

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text.RegularExpressions;
using System.Web;

/// <summary>
/// UploadHandler 的摘要說明
/// </summary>
public class DeleteImageHandler : Handler
{

    public DeleteConfig deleteConfig { get; private set; }
    public DeleteResult Result { get; private set; }

    public DeleteImageHandler(HttpContext context, DeleteConfig config)
        : base(context)
    {
        this.deleteConfig = config;
        this.Result = new DeleteResult() { State = DeleteState.Success };
    }

    public override void Process()
    {
       
        try
        {
            string realpath = Server.MapPath("/ueditor")+"/net/"+deleteConfig.PathFormat;
            
            bool bl = System.IO.File.Exists(realpath);
            if (bl)
            {
                System.IO.File.Delete(realpath);
                Result.State = DeleteState.Success;
                
            }
            else
            {
                Result.State = DeleteState.Fail;
            }
            
              
        }
        catch (Exception e)
        {
            Result.State = DeleteState.Fail;
      //      Result.ErrorMessage = e.Message;
        }
        finally
        {
            WriteResult();
        }
    }

    private void WriteResult()
    {
        this.WriteJson(new
        {
            state = GetStateMessage(Result.State),
          //  url = Result.Url,
            //title = Result.OriginFileName,
           // original = Result.OriginFileName,
           // error = Result.ErrorMessage
        });
    }

    private string GetStateMessage(DeleteState state)
    {
        switch (state)
        {
            case DeleteState.Success:
                return "文件刪除成功";

            case DeleteState.Fail:
                return "文件刪除失敗，請檢查圖片路徑是否存在";               
        }
        return "未知錯誤";
    }


}

public class DeleteConfig
{
    /// <summary>
    /// 文件命名規則
    /// </summary>
    public string PathFormat { get; set; }



}

public class DeleteResult
{
    public DeleteState State { get; set; }
  //  public string Url { get; set; }
    //public string OriginFileName { get; set; }

    //public string ErrorMessage { get; set; }
}

public enum DeleteState
{
    Success = 0,
    Fail = -1,

}

 

到了這里已經結束啦，以供參考。如果只是我，肯定不會想到用這樣的方法的，還得感謝我的一位朋友，我才能做好這個模塊，畢竟我也只是個剛進公司的新人，會的也沒那么多，如果沒有大神的指點，也不清楚到底會不會走技術這一條路。