首页 > 代码库 > 轻量级web富文本框——wangEditor使用手册（6）——配置“上传图片”功能
轻量级web富文本框——wangEditor使用手册（6）——配置“上传图片”功能
1. 引言
上一节讲解了在wangEditor中“插入代码”的功能，用到了弹出框。这一节的“上传图片”也得用弹出框。弹出框菜单如何配置，在上一节已经讲过，此处将不再重复描述，只讲上传图片的重点内容。
其实，真正的上传图片的功能，不是我自己做的，而是借用了一个很强大的上传插件——uploadify——好多朋友应该知道这个东西。那么我们就来看看，如何把uploadify这个强大的工具，整合到wangEditor中来。
下载地址：https://github.com/wangfupeng1988/wangEditor
demo演示 & 全部配置说明：http://www.cnblogs.com/wangfupeng1988/p/4198428.html
交流QQ群：164999061
2. 介绍 uploadify & 做一个简单的后台服务
uploadify的详细应用不是本文的重点，网上有各种各样的文档可供参考。例如：http://www.cnblogs.com/fanyong/p/3736685.html
另外，上传图片肯定需要一个后台服务来接收图片，我用asp.net做了一个简单的后台服务，就一个.ashx文档，把源码粘贴给大家：
1 <%@ WebHandler Language="C#" Class="data" %> 2 3 using System; 4 using System.Web; 5 using System.IO; 6 7 public class data : IHttpHandler { 8 9 public void ProcessRequest (HttpContext context) {10 context.Response.ContentType = "text/plain";11 context.Response.Charset = "utf-8";12 13 HttpPostedFile file = context.Request.Files["Filedata"];14 string uploadPath = context.Request.MapPath("/uploadedFiles/"); //网站中有一个 uploadedFiles 文件夹，存储上传来的图片15 16 string fileName = file.FileName;17 string imgUrl = "http://" + context.Request.Url.Authority + "/uploadedFiles/" + fileName;18 19 if (file != null)20 {21 if (Directory.Exists(uploadPath) == false)22 {23 Directory.CreateDirectory(uploadPath);24 }25 file.SaveAs(uploadPath + fileName);26 context.Response.Write(imgUrl);27 }28 else29 {30 context.Response.Write("0"); 31 }32 }33 34 public bool IsReusable {35 get {36 return false;37 }38 }39 40 }
3. 配置“上传图片”按钮
和上一节一样，如何配置菜单按钮，前面文章已经讲述的很清楚，这里不再一一解释，只说重点：
3.1 代码结构
看到上图的代码结构，大家应该非常熟悉了。注意画红框的‘modal‘，下文将展开解释一下。
3.2 ‘modal‘
上一节“插入代码”中，已经把‘modal‘的作用和规则都说明了。这里把‘modal‘的源码粘贴在下面，然后说明几点。
1 ‘modal‘: (function () { 2 var fileId = wangEditor_getUniqeId(), 3 $modal = $( 4 ‘<div>‘ + 5 ‘ <input type="file" id="‘ + fileId + ‘"/>‘ + 6 ‘</div>‘ 7 ); 8 9 //下文要通过jquery获取 input-file 元素，因此这里必须先渲染到dom树中，否则获取不了 input-file10 $(‘body‘).append($modal);11 12 //配置 uploadify13 $(‘#‘ + fileId).uploadify({14 height: 30,15 width: 120,16 swf: ‘uploadify/uploadify.swf‘,17 uploader: ‘data.ashx‘,18 buttonText: ‘选择图片‘,19 multi: false,20 fileTypeExts: ‘*.jpg; *.jpeg; *.gif; *.png‘,21 onUploadSuccess: function (file, data, response) {22 //wangeditor_commonCommand(e, commandName, commandValue, callback);23 wangeditor_commonCommand(null, ‘insertImage‘, data);24 $(‘.uploadify-queue‘).hide(); //强制让进度条消失25 }26 });27 28 return $modal;29 })()
- modal 需要的还是一个 $div；
- 在返回 $div 之前，要对其中的 input-file 元素做 uploadify 的配置；
- 在 uploadify 的配置中，上传成功（onUploadSuccess ）时，要执行commonCommand命令。注意，这里不是javascript事件触发的，因此没有e，传入null代替。
3.3 运行网页
启动后台服务，运行网页，即可看到效果：
4. 总结
上传图片是富文本编辑器一个非常重要的功能，直到现在才更新出来，有点姗姗来迟的感觉。没办法，事情总得一步一个脚印的走。
本节用到的所有源代码，可以在http://pan.baidu.com/s/1qWsN0Yg下载，然后用Visual Studio打开网站、运行即可。
-------------------------------------------------------------------------------------------------------------
下载地址：https://github.com/wangfupeng1988/wangEditor
demo演示 & 全部配置说明：http://www.cnblogs.com/wangfupeng1988/p/4198428.html
交流QQ群：164999061
-------------------------------------------------------------------------------------------------------------
欢迎关注我的微博。
也欢迎关注我的教程：
《从设计到模式》《深入理解javascript原型和闭包系列》《微软petshop4.0源码解读视频》《json2.js源码解读视频》
-------------------------------------------------------------------------------------------------------------
轻量级web富文本框——wangEditor使用手册（6）——配置“上传图片”功能