UEditor 除了前端,还带了后端的上传文件功能,有 PHP、ASP、JSP 版本,以前还有 .NET 版本,但是现在新版本中下载不到了。
UEditor 的后端上传功能仅供参考,并不能直接部署于实际应用中,而且 UEditor 官方也说了:“ueditor 开发组所在的 FEX 团队是一个前端团队,我们有一流的前端技术,但后端实力较欠缺”。
所以我们自己来制作一个 .NET 的后端上传吧。
ueditor 目录下创建一个 net 目录。
下面放一个 config.json 文件,这个是配置文件,这个文件可从其他版本(比如 PHP)复制过来。
然后创建一个 controller.ashx。UEditor 前端上传时,会将文件上传给他,UEditor 怎么知道传给它呢?这个路径是在 ueditor.config.js 中配置的。
这个 .ashx 文件根据 QueryString["action"] 来处理不同的事情:
当 action == "config" 时,将 config.json 的内容输出给客户端。
当 action == "uploadimage" 时,就是上传文件,将上传的文件用 context.Request.Files[0] 取出来,保存,记录到数据库,该干嘛干嘛,然后输出一个 JSON,UEditor 根据这个 JSON 插入图片到编辑器,这个 JSON 的格式是:
当 action == "listimage" 时,返回 JSON 格式类似如下:
说明:
一、建议在后端的判断要遵照 config.json 来,否则会造成一些不友好的体验,比如 config.json 中允许上传 .bmp,客户端 UEditor 遵守了,可是我们的 .ashx 文件不遵守,恰恰不允许上传 .bmp,这个体验就不友好了。
二、多图上传时,客户端并不是把所有文件一并提交,而是传完一个再传一个,所以对于 .ashx 来说,它和单图上传是一回事。
三、我希望客户端 UEditor 将 UEditor 所在的网页的 URL 通过 UrlReferrer 传过来,以便获得我们需要的一些额外参数,可是非常遗憾,单图上传时这个为 null,多图上传时这个是多图上传框(这是一个单独的 html 网页)的网址。等于说客户端只会传 action 和文件上来,如果需要更多参数,只能曲线解决了。
更多请参见:http://fex.baidu.com/ueditor/#dev-request_specification