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);
}
至于弹出层后该怎么上传大家都知道了,现在总算暂时没问题了。