Layui富文本编辑器图片上传接口(.NET C#)

最新推荐文章于 2024-06-27 13:58:52 发布

小巷而已

最新推荐文章于 2024-06-27 13:58:52 发布

阅读量2w

点赞数 10

分类专栏： C# Web前端 ASP.NET 文章标签： .net 图片 c# 文本编辑 layui

本文链接：https://blog.youkuaiyun.com/xianglikai1/article/details/77894359

版权

Web前端同时被 3 个专栏收录

33 篇文章

订阅专栏

22 篇文章

订阅专栏

ASP.NET

16 篇文章

订阅专栏

本来想偷懒找个现成的接口，搜了一下发现没有现成的，那我在这写一个并分享给大家吧。

demo打包好了在我的csdn下载中心：http://download.youkuaiyun.com/download/xianglikai1/9970000

下面也有代码和结构，你也可以复制代码。

先来张效果图：

layui的富文本编辑器样子是真的好看，简洁，虽然功能不多但是足够了，感觉唯一的小遗憾就是图片上传后不能拖拽编辑大小，只能在上传之前做好图片的尺寸，这一点百度的重量级UEditor就比较好了，但是，在我这里好看的优先级比较高。

接下来就是demo了

demo结构：

imgUploads文件夹是图片上传后保存的位置

layui这个就不用说了

server中的editimgup.ashx就是我们的图片上传接口

HtmlPage.html是我们的页面

页面的代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <title></title>
    <link href="layui/css/layui.css" rel="stylesheet" />
</head>
<body style="background-color:#eee;">
    <div style="width:90%;margin-left:5%;margin-top:100px;background-color:#fff;">
        <textarea id="txt" style="display:none;"></textarea>
    </div>
    <input type="button" value="获取内容" id="btn1" class="layui-btn" style="margin-left:5%;margin-top:20px;" />
</body>
</html>
<script src="layui/layui.js"></script>
<script type="text/javascript">
    window.onload = function () {
        layui.use('layedit', function () {
            var layedit = layui.layedit;

            layedit.set({
                uploadImage: {
                    url: 'server/editimgup.ashx' //接口url
                  , type: 'post' //默认post
                }
            });

            var editIndex = layedit.build('txt', {
                height: 400
            });

            document.getElementById('btn1').onclick = function () {
                alert(layedit.getContent(editIndex));
            }
        });
    }
</script>

editimgup.ashx接口代码：（这注释可满意？）

<%@ WebHandler Language="C#" Class="editimgup" %>

using System;
using System.Web;
using System.IO; //需要这三个命名空间
using System.Drawing;//***
using System.Drawing.Imaging;//***

public class editimgup : 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 = "/imgUploads/" + DateTime.Now.ToString("yyyyMMddhhmmssms") + ran.Next(99999) + ".jpg";

        //路径映射为绝对路径
        string path = context.Server.MapPath(serverPath);

        try
        {
            img.Save(path, ImageFormat.Jpeg);//图片保存，JPEG格式图片较小

            //保存成功后的json
            end = "{\"code\": 0,\"msg\": \"成功\",\"data\": {\"src\": \"" + serverPath + "\"}}";
        }
        catch { }

        context.Response.Write(end);//输出结果
        context.Response.End();
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}