kz.layedit 源文档如下:
//别忘了调用layui/lay/modules/layedit.js
layui.use(['layedit', 'layer', 'jquery'], function () {
var $ = layui.jquery;
var layedit = layui.layedit;
layedit.set({
//暴露layupload参数设置接口 --详细查看layupload参数说明
//这里layui会用js用post方式给后台传递一下参数
uploadImage: {
url: '/Attachment/LayUploadFile',//接口地址
accept: 'image',
acceptMime: 'image/*',
exts: 'jpg|png|gif|bmp|jpeg',
size: '10240'
}
, uploadVideo: {
url: '/Attachment/LayUploadFile',
accept: 'video',
acceptMime: 'video/*',
exts: 'mp4|flv|avi|rm|rmvb',
size: '20480'
}
//右键删除图片/视频时的回调参数,post到后台删除服务器文件等操作,
//重点来了,这里layui会用post 方式给后台传你想删的图片路径,在后台你可以接受并删除
//传递参数:
//图片: imgpath --图片路径
//视频: filepath --视频路径 imgpath --封面路径
, calldel: {
url: '/Attachment/DeleteFile'
}
//开发者模式 --默认为false
, devmode: true
//插入代码设置
, codeConfig: {
hide: true, //是否显示编码语言选择框
default: 'javascript' //hide为true时的默认语言格式
}
, tool: [
'html', 'code', 'strong', 'italic', 'underline', 'del', 'addhr', '|', 'fontFomatt', 'colorpicker', 'face'
, '|', 'left', 'center', 'right', '|', 'link', 'unlink',‘images’, 'image_alt', 'video', 'anchors'
, '|',‘table’, 'fullScreen'
]
, height: '90%'
});
var ieditor = layedit.build('layeditDemo');
})
我用的是asp.net,不是MVC core ,所以开发时不会写json,无法建立接口url,但是最后在上网上找到了怎么写接口了。
大佬写的上传图片的接口demo:https://blog.youkuaiyun.com/xianglikai1/article/details/77894359原文
首先你添加一般处理程序 以ashx结束的文件制作URL接口(下图serve文件夹下的)
我添加的是两个
imgup上传图片到服务器指定文件加(跟那位大佬的一样 感谢他的分享):
using System;
using System.Web;
using System.IO; //需要这三个命名空间
using System.Drawing;//***
using System.Drawing.Imaging;//***
public class imgup : IHttpHandler {
public void ProcessRequest(HttpContext context)
{
string end = "{\"code\": 1,\"msg\": \"服务器故障\",\"data\": {\"src\": \"\"}}"; //返回的json,
var file = context.Request.Files[0]; //获取选中文件
Stream stream = file.InputStream; //将文件转为流
Image img = Image.FromStream(stream);//将流中的图片转换为Image图片对象
Random ran = new Random((int)DateTime.Now.Ticks);//利用时间种子解决伪随机数短时间重复问题
//文件保存位置及命名,精确到毫秒并附带一组随机数,防止文件重名,数据库保存路径为此变量
string serverPath = "/image/" + DateTime.Now.ToString("yyyyMMddhhmm") + ran.Next(999) + ".jpg";
//路径映射为绝对路径
string path = context.Server.MapPath(serverPath);
try
{
img.Save(path, ImageFormat.Jpeg);//图片保存,JPEG格式图片较小
//保存成功后的json
end = "{\"code\": 0,\"msg\": \"成功\",\"data\": {\"src\": \"" + serverPath + "\"}}";
uploadimg imagesrc = new uploadimg();
imagesrc.setimgsrc(serverPath);
}
catch { }
context.Response.Write(end);//输出结果
context.Response.End();
}
public bool IsReusable {
get {
return false;
}
}
}
下面的是右键删除图片的URL和代码,这个是自己写的。
//右键删除图片/视频时的回调参数,post到后台删除服务器文件等操作,
//传递参数:
//图片: imgpath --图片路径
//视频: filepath --视频路径 imgpath --封面路径
, calldel: {
url: ‘/Attachment/DeleteFile’//imagedel 接口
}
using System;
using System.Web;
using System.IO; //需要这三个命名空间
using System.Drawing;//***
using System.Drawing.Imaging;//***
public class imgdel : IHttpHandler {
public void ProcessRequest (HttpContext context) {
//获取layedit给后台post的图片地址
//传递参数:图片: imgpath --图片路径
string path=context.Request["imgpath"].ToString();
path= path.Substring(path.LastIndexOf("/image"));//把前面的其他无关字符都去掉,截取图片的位置信息
FileInfo file = new FileInfo(context.Server.MapPath(path));//指定文件路径
file.Attributes = FileAttributes.Normal;//将文件属知性设置道为版普通,比方说权只读文件设置为普通
file.Delete();//删除文件
context.Response.Write("");
context.Response.End();
}
public bool IsReusable {
get {
return false;
}
}
以上基本完成了接口的设定,最后在下上接口地址就可以实现kz.layedit的全部功能。