C#+ckeidtor5实现图片上传

index.html

html 复制代码
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CkEditor5</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }

        .editor-container {
            width: 100%;
            height: 100%;
        }

        #editor {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="editor-container">
        <textarea id="editor">
        <p>Hello World!</p>
    </textarea>
    </div>
    <script src="lib/ckeditor.js"></script>
    <script src="lib/translations/zh-cn.js"></script>
    <script>
        ClassicEditor.create(document.querySelector('#editor'), {
            licenseKey: 'GPL',
            language: 'zh-cn',
            simpleUpload: {
            	//同一个域名下可以不写
			    uploadUrl: '/Handler1.ashx',
			},
        })
            .then(editor => {
                window.editor = editor;
            })
            .catch(error => {
                console.error('There was a problem initializing the editor.', error);
            });
    </script>
</body>
</html>

后端接口如下

cs 复制代码
using System.IO;
using System.Linq;
using System.Web;

namespace CkEditorStu02
{
    /// <summary>
    /// Handler1 的摘要说明
    /// </summary>
    public class Handler1 : IHttpHandler
    {
        public string GetCurrentDomainName()
        {
            // 获取当前请求的协议(HTTP或HTTPS)
            string scheme = HttpContext.Current.Request.Url.Scheme;

            // 获取当前请求的主机名(包括端口号)
            string host = HttpContext.Current.Request.Url.Host;

            // 如果需要,可以在这里添加端口号
            int port = HttpContext.Current.Request.Url.Port;

            // 组合协议和主机名以形成完整的域名
            string domainName = scheme + "://" + host + ":" + port;

            return domainName;
        }

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "application/json";
            context.Response.ContentEncoding = System.Text.Encoding.UTF8;
            context.Response.AppendHeader("Access-Control-Allow-Origin", "*"); // 允许来自任何域的请求
            context.Response.AppendHeader("Access-Control-Allow-Methods", "POST,OPTIONS,GET"); // 允许的请求方法
            context.Response.AppendHeader("Access-Control-Allow-Headers", "Content-Type"); // 允许的请求头

            var files = context.Request.Files;
            if (files == null || files.Count <= 0)
            {
                var result = $"{{\"error\": {{\"message\": \"文件不存在\"}}}}";
                context.Response.Write(result);
                return;
            }
            bool isLarge = false;
            string fileName = "";
            for (int i = 0; i < files.Count; i++)
            {
                var file = files[i];
                //判断文件大小
                //大小限制
                int maxSize = 1 * 1024 * 1024;  //最大是2M(转换为字节)
                if (file.ContentLength > maxSize)
                {
                    context.Response.Write($"{{\"error\": {{\"message\": \"上传文件大小超出限制\"}}}}");
                    return;
                }
                //扩展名限制
                string[] exts = { "image/jpg", "image/jpeg", "image/gif", "image/png" };
                if (!exts.Contains(file.ContentType.ToLower()))
                {
                    context.Response.Write("必须上传图片文件");
                    return;
                }
                fileName = Path.GetFileName(file.FileName);
                file.SaveAs(Path.Combine(context.Server.MapPath("~"), fileName));
                break;
            }
            var res = $"{{\"url\": \"{GetCurrentDomainName()}/{fileName}\"}}";
            //同一个域名下,下面的代码也可以
			//var res = $"{{\"url\": \"/{fileName}\"}}";
            context.Response.Write(res);
            /*
             成功:
            {
                "url": "https://example.com/images/foo.jpg"
            }
            失败:
            {
                "error": {
                    "message": "The image upload failed because the image was too big (max 1.5MB)."
                }
            }
             */
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}
相关推荐
Humbunklung5 分钟前
C# WPF 实现读取文件夹中的PDF并显示其页数
pdf·c#·wpf·npoi·gemini·itext
时光追逐者33 分钟前
C#/.NET/.NET Core技术前沿周刊 | 第 48 期(2025年7.21-7.27)
c#·.net·.netcore·.net core
蓝点lilac37 分钟前
C# 调用邮箱应用发送带附件的邮件
c#·.net
工程师0072 小时前
C#多线程,同步与异步详解
开发语言·c#·多线程·同步·异步编程
小乖兽技术4 小时前
在 .NET 中使用 Base64 时容易踩的坑总结
开发语言·c#·.net
小乖兽技术8 小时前
C#与C++交互开发系列(二十六):构建跨语言共享缓存,实现键值对读写与数据同步(实践方案)
c++·c#·交互
张人玉10 小时前
c#Lambda 表达式与事件核心知识点整理
开发语言·python·c#
SkyrimCitadelValinor18 小时前
c#中让图片显示清晰
开发语言·c#
爱吃香蕉的阿豪18 小时前
SignalR 全解析:核心原理、适用场景与 Vue + .NET Core 实战
vue.js·microsoft·c#·.netcore·signalr
@蓝莓果粒茶21 小时前
LeetCode第350题_两个数组的交集II
c++·python·学习·算法·leetcode·职场和发展·c#