标签：simditor 上传图片 asp.net 富文本编辑器
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",为外链图片的
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;
}
}
}
}
Simditor上传图片（ASP.NET+JS/Jquery）
标签：simditor 上传图片 asp.net 富文本编辑器
原文地址：http://blog.csdn.net/wb09100310/article/details/42739965
