Simditor上传图片（ASP.NET+JS/Jquery）

来源：互联网发布：rrt路径规划算法编辑：程序博客网时间：2024/05/17 06:18

Simditor是我比较喜欢的富文本编辑器，他比较简洁，配置也很简单，Simditor官网都有，就不多说了。但是，他的那个图片上传图片没有反应，百度了一下，都是这个Java版的Simditor图片上传。看了下改成.NET也不知道用不用得成，索性自己写一个。那要怎么写呢？

1.首先按照官网配置

//富文本编辑器配置        var editor = new Simditor({            textarea: $('#<%=tb_Content.ClientID%>'),            upload: {                url: '../Upload/Notice/', //文件上传的接口地址                params: null, //键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交                fileKey: 'fileDataFileName', //服务器端获取文件数据的参数名                connectionCount: 3,                leaveConfirm: '正在上传文件'            },            defaultImage: '../images/user_photo_max.png', //编辑器插入图片时使用的默认图片        });

这时候，点击上传图片会出现如下界面

然后就没有然后了……那怎么办呢？往下看

2.按F12查看“本地图片”和“外链图片-”的源代码

为“本地上传”的上传控件添加 class="up-img",为外链图片的添加 class link-img。这里有人要问了，怎么添加？再往下看

3.找到simditor.js文件打开，“本地图片”就Ctrl+F5查找 accept="image/*"，注意，一共有两个，第一个就是“本地图片”的，第二个是“外链图片”的，其他标签查找以此类推，找到之后添加类名。

对于“外链图片”的这句把他注释了，然后一点就会弹出选择图片的界面，我们要把它改造成把文本框里面的链接图片添加到富文本编辑器中。

好了，到这里准备工作就做完了，然后我们来理一理思路。我们希望点击“本地图片”并选择好图片之后文件自动上传到指定的文件夹，并显示到文本域中。而点击的时候，左边文本框里的链接图片也能够添加到文本域中。值得说一下的是，上传之后的图片点击后可以修改大小，修改弹出的文本框里面的值就行，光标离开文本框后自动修改。

4.做完了上面的功能，我们就可以为“.up-img”和“link-img”添加事件并拿到图片地址了，然后通过ajax方式上传到指定文件夹。

★“本地图片”事件JS代码

//本地上传图片        $(".up-img").change(function () {            var path = $(this).val();            var d = new Date();            $.ajax({                type: "POST",                url: "../Ajax/Upload.ashx",                data: {                    fileurl: encodeURI(path),                    uploadurl: encodeURI("../Upload/Notice/"),                    time: d.getSeconds()                    },                    dataType: "text",                    error: function () {                        ZENG.msgbox.show('请求错误！', 1, 2000);                    },                    success: function (data) {                        if (data.length >= 2) {                            var url = data;                            $(".simditor-body").html($(".simditor-body").html()+"<p><img src='" + url + "' style='max-width:800px;height:auto;'/></p>");//把图片添加到文本域中                            editor.sync();//将编辑器的正文内容同步到 textarea 元素的 val 属性，返回值为编辑器正文的 HTML 内容。                            ZENG.msgbox.show('上传成功！', 4, 2000);                        } else if (data == "0") {                            ZENG.msgbox.show('请选择要上传的图片！', 1, 2000);                        } else if (data == "1") {                            ZENG.msgbox.show('只能上传jpg/png/gif/bmp格式的图片！', 1, 2000);                        } else if (data == "2") {                            ZENG.msgbox.show('文件目前不可写！', 1, 2000);                        }                        else {                            ZENG.msgbox.show('上传失败！', 5, 2000);                        }                    }                });        });

★“外链图片”事件JS代码

//外链图片        $(document).on("click", ".link-img", function () {            $(".selected").attr("src", $(".image-src").val());//把文本框中的图片链接替换到默认图片的链接上            $(".selected").css("max-width", "90%");            $(".selected").css("height", "auto");        });

★Ajax后台代码

using System;using System.Collections.Generic;using System.Configuration;using System.IO;using System.Linq;using System.Net;using System.Web;namespace LovingTrip.Ajax{    /// <summary>    /// Upload 的摘要说明    /// 上传文件    /// </summary>    public class Upload : IHttpHandler    {        public void ProcessRequest(HttpContext context)        {            //文件路径            string fileurl = context.Request.Form["fileurl"] == null ? "" : HttpUtility.UrlDecode(context.Request.Form["fileurl"]);            //上传路径            string uploadurl = context.Request.Form["uploadurl"] == null ? "" : HttpUtility.UrlDecode(context.Request.Form["uploadurl"]);            if (fileurl == "" || uploadurl == "")            {//请选择上传文件！                context.Response.Write("0");                return;            }            FileInfo file = new FileInfo(fileurl);            string imgType = ConfigurationManager.AppSettings["imgType"].ToString();            if (imgType.IndexOf(file.Extension.Substring(1))<0)            {//验证文件格式                context.Response.Write("1");                return;            }            string fullPath = HttpContext.Current.Server.MapPath(uploadurl);//获取物理路径            if (!Directory.Exists(fullPath))            {                Directory.CreateDirectory(fullPath);//如果不存在，则创建            }            string date = DateTime.Now.ToString("yyyyMMddHHmmss");            string url = fullPath + date + file.Name;//完成路径            //创建WebClient实例                   WebClient myWebClient = new WebClient();            //设定windows网络安全认证   方法1            myWebClient.Credentials = CredentialCache.DefaultCredentials;            ////设定windows网络安全认证   方法2            //NetworkCredential cred = new NetworkCredential("UserName", "UserPWD");            //CredentialCache cache = new CredentialCache();            //cache.Add(new Uri("UploadPath"), "Basic", cred);            //myWebClient.Credentials = cache;            FileStream fs = new FileStream(fileurl, FileMode.Open, FileAccess.Read);            BinaryReader r = new BinaryReader(fs);            //使用UploadFile方法可以用下面的格式                   //myWebClient.UploadFile(toFile, "PUT",fileNamePath);                   byte[] postArray = r.ReadBytes((int)fs.Length);            Stream postStream = myWebClient.OpenWrite(url, "PUT");            if (postStream.CanWrite)            {                postStream.Write(postArray, 0, postArray.Length);            }            else            {                context.Response.Write("2");//文件目前不可写                return;            }            postStream.Close();            context.Response.Write(uploadurl+date + file.Name);//上传成功        }        public bool IsReusable        {            get            {                return false;            }        }    }}

博客写罢，我发现挂服务器上的时候出问题了，本地可以上传，服务器上不可以，找不到图片路径了。为什么不解释了，经过1天的奋斗，网上的资料显示Ajax上传有两种方式：1,js的 FormData添加文件对象，然后请求，IE不行。2.弄一个框架页模式表单提交。最后只能换种思路了，点击“本地图片”的时候弹出了层上传吧。

那又怎么实现呢？

js代码如下：

 //本地上传图片        $(".up-img").click(function () {            document.getElementById("upload").click();            return false;        });       //上传成功后调用        function UploadSuccess(url) {            $(".simditor-body").html($(".simditor-body").html() + "<p><img src='" + url + "' style='max-width:800px;height:auto;'/></p>"); //把图片添加到文本域中            editor.sync(); //将编辑器的正文内容同步到 textarea 元素的 val 属性，返回值为编辑器正文的 HTML 内容。            ZENG.msgbox.show('上传成功！', 4, 2000);        }

至于弹出层后该怎么上传大家都知道了，现在总算暂时没问题了。

1 0