admin 管理员组文章数量: 1184232
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:
首先你添加一般处理程序 以ashx结束的文件制作URL接口(下图serve文件夹下的)
using System;using System.Web;using System.IO;//需要这三个命名空间using System.Drawing;//***using System.Drawing.Imaging;//***publicclass imgup : IHttpHandler {publicvoidProcessRequest(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 =newRandom((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 =newuploadimg();
imagesrc.setimgsrc(serverPath);}catch{}
context.Response.Write(end);//输出结果
context.Response.End();}publicbool IsReusable {get{returnfalse;}}}
下面的是右键删除图片的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;//***publicclass imgdel : IHttpHandler {publicvoid ProcessRequest (HttpContext context){//获取layedit给后台post的图片地址 //传递参数:图片: imgpath --图片路径string path=context.Request["imgpath"].ToString();
path= path.Substring(path.LastIndexOf("/image"));//把前面的其他无关字符都去掉,截取图片的位置信息FileInfo file =newFileInfo(context.Server.MapPath(path));//指定文件路径
file.Attributes = FileAttributes.Normal;//将文件属知性设置道为版普通,比方说权只读文件设置为普通
file.Delete();//删除文件
context.Response.Write("");
context.Response.End();}publicbool IsReusable {get{returnfalse;}}以上基本完成了接口的设定,最后在下上接口地址就可以实现kz.layedit的全部功能。
版权声明:本文标题:精通LayEdit:构建个性化的图片上传与管理流程,附带API使用指南 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.roclinux.cn/b/1771604707a3546498.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论