轻量级web富文本框——wangEditor使用手册（6）——配置“上传图片”功能

浏览数：79 / 时间：2015年06月09日

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         else
29         {
30             context.Response.Write("0"); 
31         }
32     }
33  
34     public bool IsReusable {
35         get {
36             return false;
37         }
38     }
39 
40 }

data.ashx 源码

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-file
10                         $(‘body‘).append($modal);
11 
12                         //配置 uploadify
13                         $(‘#‘ + 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‘ 源码

modal 需要的还是一个 $div；
在返回 $div 之前，要对其中的 input-file 元素做 uploadify 的配置；
在 uploadify 的配置中，上传成功（onUploadSuccess ）时，要执行commonCommand命令。注意，这里不是javascript事件触发的，因此没有e，传入null代替。