UEditor1.4.3.3实现图片上传、删除功能

时间:2021-03-04 15:59:41

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

UEditor1.4.3.3实现图片上传、删除功能

2、新建一个项目,在项目中添加UEditor,把下载好的插件都放在ueditor这个文件夹中,在进行一些基本的配置

UEditor1.4.3.3实现图片上传、删除功能

3、在根目录下新建一个为index.aspx的网页,在进行如下的配置,引用三个js文件,在form表单里面用csript来构造一个页面,在让var ue = UE.getEditor("container");来初始化这个页面。运行后界面都已经出现啦

UEditor1.4.3.3实现图片上传、删除功能

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/上传图片的时间 文件夹中,如果没有建文件夹也没关系,会自动生成的。如果觉得图片保存目录太深了,也可以自定义上面的图片文件夹。

UEditor1.4.3.3实现图片上传、删除功能

图片访问路径前缀一点要为空,不然上传之后就会出错,图片出不来。imagepathFormat里的文件夹是自己新建的,我当时只新建了uploadFile里面的image文件夹自己出现了,还有一个文件就是以日期命名的,如果你不需要在包含文件,就可以把后面的{yyyy}这些日期的都删了。

5.现在图片已经可以上传了。但还有一个功能没完成,就是删除功能了,我这里要做的是单个图片的删除。

UEditor1.4.3.3实现图片上传、删除功能

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("文件删除成功")>-) {
del.parent().remove();
} else alert(result);
});
}
})[]); /* 在这一句之前添加 */
this.list.insertBefore(item, this.clearFloat);

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

 /* 在线管理删除按钮样式 */
#online li .delbtn {
position: absolute;
top: ;
right: ;
border: ;
z-index: ;
color: #ffffff;
display: inline;
font-size: 12px;
line-height: .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 = ,
Fail = -, }

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