首页 > 代码库 > CKEditor不借助CKFinder实现图片上传(.net版 ashx实现)
CKEditor不借助CKFinder实现图片上传(.net版 ashx实现)
参考博客:http://blog.csdn.net/mydwr/article/details/8669594
本人版本:4.4.6
打开文件:ckeditor/plugins/image/dialogs/image.js
搜索内容:【c.config.image_previewText】,并删掉其后引号内的内容。
删除后格式:【c.config.image_previewText||""】。
与原文差异:原内容原文中是【b.config.image_previewText】,我这里是【c.config.image_previewText】,可能是版本不同的原因;原文中包括其后内容的包括号是单引号,我的版本是双引号,不影响使用。
修改影响:预览界面中杂乱的字符消失。
搜索内容:“upload”,并找到:【id:"Upload",hidden:!0】。
替换内容:将hidden的值改为0。
与原文差异:原文hidden后的值是true,我这里是非0。
修改影响:编辑器图片界面的上传按钮及选项卡出现。
打开文件:ckeditor/config.js文件
在配置的最后添加一条【config.filebrowserImageUploadUrl = "【ashx上传处理页面路径】";】
如果只是进行以上的设置的话,在图片上传完毕之后,会提示【缺少图像源文件地址】。
为了使其正常运行,则需要在图片上传成功的返回值中添加script将图片地址输入预览当中。
代码如下【注意将uploadImages/替换为图片存储的文件夹,modifiedName替换为上传后存储的文件名】:
1 context.Response.Write("<script type=\"text/javascript\">");2 context.Response.Write("window.parent.CKEDITOR.tools.callFunction(" + callbackNumber + ",‘" + "uploadImages/" + modifiedName + "‘,‘‘)");3 context.Response.Write("</script>");
一定要将context.Response.ContentType设置为"text/html",而不是默认的"text/plain",返回的值才会是html代码而不是不能运行的纯字符串。
ashx上传处理页面如下【我的处理比较繁琐,各位可自行简化】:
1 public class UploaderHandler : IHttpHandler 2 { 3 4 public void ProcessRequest(HttpContext context) 5 { 6 context.Response.ContentType = "text/html"; 7 8 //对文件进行校验 9 if (1 > context.Request.Files.Count)10 {11 ResponseWriteEnd(context, "<span style=‘color: red; font-size: 20px;‘>*请选择上传文件!</span>");12 return;13 }14 else15 {16 HttpPostedFile _upfile = context.Request.Files[0];17 string fileName = _upfile.FileName;18 string fileType = fileName.Substring(fileName.LastIndexOf(".") + 1).ToLower();19 int imgLength = _upfile.ContentLength;//获取文件的字节大小 20 21 if (!(fileType.Equals("jpg") || fileType.Equals("png") || fileType.Equals("bmp") || fileType.Equals("gif")))22 {23 ResponseWriteEnd(context, "<span style=‘color: red; font-size: 20px;‘>*只能上传jpg/png/bmp/gif格式的图片!</span>"); //只能上传JPG格式图片24 return;25 }26 else27 {28 if (imgLength > 5 * 1024 * 1024)29 {30 ResponseWriteEnd(context, "<span style=‘color: red; font-size: 20px;‘>*图片最大不能超过5M!</span>"); //图片不能大于5M 31 return;32 }33 else34 {35 try36 {37 // 构造简单的防重复文件名38 string callbackNumber = context.Request.QueryString["CKEditorFuncNum"];39 string modifiedName = DateTime.Now.ToString("yyyy_MM_dd_hh_mm_ss_") + fileName;40 string savePathName = context.Server.MapPath("uploadImages/" + modifiedName);41 _upfile.SaveAs(savePathName);42 if (_upfile.InputStream != null)43 {44 _upfile.InputStream.Close();45 }46 // 上传结束后自动跳转到预览界面,并显示预览47 context.Response.Write("<script type=\"text/javascript\">");48 context.Response.Write("window.parent.CKEDITOR.tools.callFunction(" + callbackNumber + ",‘" + "uploadImages/" + modifiedName + "‘,‘‘)");49 context.Response.Write("</script>");50 ResponseWriteEnd(context, "<span style=‘font-size: 20px;‘>上传成功!</span>"); //上传成功51 return;52 }53 catch54 {55 ResponseWriteEnd(context, "<span style=‘color: red; font-size: 20px;‘>服务器内部错误!</span>");56 return;57 }58 }59 }60 }61 }62 63 public bool IsReusable64 {65 get66 {67 return false;68 }69 }70 71 private void ResponseWriteEnd(HttpContext context, string message)72 {73 context.Response.Write(message);74 context.Response.End();75 }76 }
CKEditor不借助CKFinder实现图片上传(.net版 ashx实现)