kz.layedit的图片上传(uploadImage: { url:})和右击删除( calldel: { url})功能的实现(包含图片上传URL接口)

本文介绍了如何在ASP.NET环境下使用kz.layedit实现图片上传(uploadImage)和右键删除(calldel)功能。通过创建ASHX文件作为URL接口,参考大佬的上传图片接口示例,并编写了删除图片的接口代码,实现了编辑器的完整功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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的全部功能。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值