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文本编辑器里面自带的一个上传类，把它改成删除类。

 1 /* 在这两句之后添加 */
 2 item.appendChild(img);
 3 item.appendChild(icon);
 4 
 5 //增加删除按钮
 6 item.appendChild($("<span class='delbtn' url='" + list[i].url + "'>✖</span>").click(function (){
 7 var del = $(this);
 8 try {
 9 window.event.cancelBubble = true; //停止冒泡
10 window.event.returnValue = false; //阻止事件的默认行为
11 window.event.preventDefault(); //取消事件的默认行为 
12 window.event.stopPropagation(); //阻止事件的传播
13 } finally {
14 if (!confirm("确定要删除吗？")) return;
15 $.post(editor.getOpt("serverUrl") + "?action=deleteimage", { "path": del.attr("url") },
16 function (result) {
17 if (result.indexOf("文件删除成功")>-1) {
18 del.parent().remove();
19 }
20 
21 else alert(result);
22 });
23 }
24 })[0]);
25 
26 
27 
28 /* 在这一句之前添加 */
29 this.list.insertBefore(item, this.clearFloat);

 

在image.css的文件中加入样式，删除的图标更好看一些，我是放在最后。注：样式是参考另外一篇文章。

 1 /* 在线管理删除按钮样式 */
 2 #online li .delbtn { 
 3 position: absolute;
 4 top: 0;
 5 right: 0;
 6 border: 0; 
 7 z-index: 3;
 8 color: #ffffff;
 9 display: inline;
10 font-size: 12px;
11 line-height: 10.5px;
12 padding:3px 5px;
13 text-align: center;
14 background-color: #d9534f;
15 }

 删除类，是自己新建了一个类，放在net/app_code中 DeleteImageHandler.cs

  1 using System;
  2 using System.Collections.Generic;
  3 using System.IO;
  4 using System.Linq;
  5 using System.Text.RegularExpressions;
  6 using System.Web;
  7 
  8 /// <summary>
  9 /// UploadHandler 的摘要说明
 10 /// </summary>
 11 public class DeleteImageHandler : Handler
 12 {
 13 
 14     public DeleteConfig deleteConfig { get; private set; }
 15     public DeleteResult Result { get; private set; }
 16 
 17     public DeleteImageHandler(HttpContext context, DeleteConfig config)
 18         : base(context)
 19     {
 20         this.deleteConfig = config;
 21         this.Result = new DeleteResult() { State = DeleteState.Success };
 22     }
 23 
 24     public override void Process()
 25     {
 26        
 27         try
 28         {
 29             string realpath = Server.MapPath("/ueditor")+"/net/"+deleteConfig.PathFormat;
 30             
 31             bool bl = System.IO.File.Exists(realpath);
 32             if (bl)
 33             {
 34                 System.IO.File.Delete(realpath);
 35                 Result.State = DeleteState.Success;
 36                 
 37             }
 38             else
 39             {
 40                 Result.State = DeleteState.Fail;
 41             }
 42             
 43               
 44         }
 45         catch (Exception e)
 46         {
 47             Result.State = DeleteState.Fail;
 48       //      Result.ErrorMessage = e.Message;
 49         }
 50         finally
 51         {
 52             WriteResult();
 53         }
 54     }
 55 
 56     private void WriteResult()
 57     {
 58         this.WriteJson(new
 59         {
 60             state = GetStateMessage(Result.State),
 61           //  url = Result.Url,
 62             //title = Result.OriginFileName,
 63            // original = Result.OriginFileName,
 64            // error = Result.ErrorMessage
 65         });
 66     }
 67 
 68     private string GetStateMessage(DeleteState state)
 69     {
 70         switch (state)
 71         {
 72             case DeleteState.Success:
 73                 return "文件删除成功";
 74 
 75             case DeleteState.Fail:
 76                 return "文件删除失败，请检查图片路径是否存在";               
 77         }
 78         return "未知错误";
 79     }
 80 
 81 
 82 }
 83 
 84 public class DeleteConfig
 85 {
 86     /// <summary>
 87     /// 文件命名规则
 88     /// </summary>
 89     public string PathFormat { get; set; }
 90 
 91 
 92 
 93 }
 94 
 95 public class DeleteResult
 96 {
 97     public DeleteState State { get; set; }
 98   //  public string Url { get; set; }
 99     //public string OriginFileName { get; set; }
100 
101     //public string ErrorMessage { get; set; }
102 }
103 
104 public enum DeleteState
105 {
106     Success = 0,
107     Fail = -1,
108 
109 }

 

到了这里已经结束啦，以供参考。如果只是我，肯定不会想到用这样的方法的，还得感谢我的一位朋友，我才能做好这个模块，毕竟我也只是个刚进公司的新人，会的也没那么多，如果没有大神的指点，也不清楚到底会不会走技术这一条路。

 

posted @ 2016-12-16 17:11  Racheal  阅读(8306)  评论(1)  编辑  收藏  举报