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

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;
            }
        }
    }
}