ueditor默认的文件管理可以单独拿出来使用,api很方便,但是没有提供对已上传文件的删除功能,下面简单整个删除功能,思路是通过ajax调用服务器端的ashx文件删除。
前端修改
html改动
一切从简,就不给每个文件来个删除按钮了,直接双击删除,但是需要给个提示:
1.打开/ueditor/dialogs/attachment/attachment.html
2.找到id为tabhead的div,在它前面增加一个span标签:
<span>双击删除文件</span>
<div id="tabhead" class="tabhead">
...
</div>
效果如下:
js改动
这里监听每个文件的双击事件,通过ajax调用服务器函数
1.打开/ueditor/dialogs/attachment/attachment.js
2.Ctrl+F搜索“选中”会定位到601行,如下:
/* 选中图片 */
domUtils.on(this.list, 'click', function (e) {...}
这是点击文件时的处理函数,现在要监听双击,只要在这个函数后面增加以下代码就可以:
/*双击删除*/
domUtils.on(this.list, 'dblclick', function (e) {
$li = $(e.target).parents('li');
var path = $li.attr('data-url');
var name = path.substr(path.lastIndexOf('/') + 1);
if (confirm('确定要删除' + name + '吗?此操作不可恢复')) {
$.ajax({
url: '/Services/ueditor.ashx',
data: { path: path },
success: function (data) {
switch (data.Code) {
case -1:
case -2:
case -3: alert(data.Msg); break;
case 1: $li.remove(); break;
default: alert('未识别的返回码:' + data.Code);
console.log(data); break;
}
}
});
}
});
服务器端改动
1.根目录下创建一个Services文件夹,用来存放ashx文件(直接在根目录下创建ashx也可以)
2.创建一个名为ueditor.ashx的一般事务处理文件
3.返回数据结构:
public class JsonResult {
/// <summary>
/// 状态码
/// -1 错误的请求
/// -2 系统错误
/// -3 未登录或权限不足
/// 1 成功
/// </summary>
public int Code { get; set; }
public string Msg { get; set; }
}
4.处理函数
/// <summary>
/// 根据请求删除文件
/// </summary>
/// <param name="context"></param>
public void ProcessRequest(HttpContext context) {
context.Response.ContentType = "application/json";
//验证权限
if (!context.User.IsInRole("管理员")) {
context.Response.Write(JsonConvert.SerializeObject(
new JsonResult {
Code = -3,
Msg="您无权进行此操作!"
}));
return;
}
//获取参数
string path = context.Request["path"];
path = "~" + path;
string phyic = context.Server.MapPath(path);
if (!File.Exists(phyic)) {
context.Response.Write(JsonConvert.SerializeObject(
new JsonResult {
Code = -1,
Msg="文件不存在!"
}));
return;
}
try {
File.Delete(phyic);
}catch(Exception e) {
context.Response.Write(JsonConvert.SerializeObject(
new JsonResult {
Code = -2,
Msg = "系统错误:"+e.Message
}));
return;
}
context.Response.Write(JsonConvert.SerializeObject(
new JsonResult {
Code=1,
Msg="文件删除成功"
}));
}