nodejs 整合kindEditor实现图片上传


Posted in NodeJs onFebruary 03, 2015

kindEditor官网上中提供了ASP,ASP.NET,JSP相关的整合应用,http://kindeditor.net/docs/upload.html可以参照实现nodejs的整合,发现实用nodejs更简单

环境:
unbuntu 14.10
nodejs 0.10.35
express 4.11.2
formidable 1.0.16
kindEditor 4.1.10
webStorm 8

1.通过IDE或终端创建一个名称为test的工程

2.编辑package.json添加formidable依赖,这里使用的是1.0.16版本,之后通过终端执行npm install完成依赖的安装

3.将kindEditor整个目录放到test/public/lib下

4.修改index.ejs和index.js文件
index.ejs中整合kindEditor:
       设置kindEditor的uploadJson为nodejs所提供的处理图片上传的路由url这里用的是/uploadImg
index.js中添加处理图片上传的路由url:
       添加/uploadImg对应的post处理方式,
代码如下:

index.js

<!DOCTYPE html>

<html>

  <head>

    <title><%= title %></title>

    <link rel='stylesheet' href='/stylesheets/style.css' />

      <script charset="utf-8" src="/lib/kindeditor-4.1.10/kindeditor.js"></script>

      <script charset="utf-8" src="/lib/kindeditor-4.1.10/lang/zh_CN.js"></script>

      <script>

          var options = {

              uploadJson: '/uploadImg'

          };

          KindEditor.ready(function(K) {

              window.editor = K.create('#editor', options);

          });

      </script>

  </head>

  <body>

    <h1><%= title %></h1>

    <textarea id="editor" name="content" style="width:700px;height:300px;">

        <strong>HTML内容</strong>

    </textarea>

  </body>

</html>

index.js

var express = require('express');

var router = express.Router();

var formidable = require('formidable');

/* GET home page. */

router.get('/', function(req, res, next) {

  res.render('index', { title: '图片上传' });

});

router.post('/uploadImg', function(req, res, next) {

    var form = new formidable.IncomingForm();

    form.keepExtensions = true;

    form.uploadDir = __dirname + '/../public/upload';

    form.parse(req, function (err, fields, files) {

        if (err) {

            throw err;

        }

        var image = files.imgFile;

        var path = image.path;

        path = path.replace('/\\/g', '/');

        var url = '/upload' + path.substr(path.lastIndexOf('/'), path.length);

        var info = {

            "error": 0,

            "url": url

        };

        res.send(info);

    });

});

module.exports = router;

之后通过IDE或终端启动test工程,通过http://localhost:3000访问页面就可以上传图片了

NodeJs 相关文章推荐
轻松创建nodejs服务器(4):路由
Dec 18 NodeJs
NodeJS学习笔记之Connect中间件模块(二)
Jan 27 NodeJs
搭建简单的nodejs http服务器详解
Mar 09 NodeJs
angular2+nodejs实现图片上传功能
Mar 27 NodeJs
nodejs个人博客开发第二步 入口文件
Apr 12 NodeJs
win系统下nodejs环境安装配置
May 04 NodeJs
基于nodejs 的多页面爬虫实例代码
May 31 NodeJs
nodejs之koa2请求示例(GET,POST)
Aug 07 NodeJs
NodeJS使用Range请求实现下载功能的方法示例
Oct 12 NodeJs
nodejs基础之buffer缓冲区用法分析
Dec 26 NodeJs
Nodejs中怎么实现函数的串行执行
Mar 02 NodeJs
Nodejs文件上传、监听上传进度的代码
Mar 27 NodeJs
NodeJS学习笔记之Connect中间件应用实例
Jan 27 #NodeJs
NodeJS学习笔记之Connect中间件模块(二)
Jan 27 #NodeJs
NodeJS学习笔记之Connect中间件模块(一)
Jan 27 #NodeJs
nodejs批量修改文件编码格式
Jan 22 #NodeJs
NodeJS学习笔记之MongoDB模块
Jan 13 #NodeJs
NodeJS学习笔记之(Url,QueryString,Path)模块
Jan 13 #NodeJs
NodeJS学习笔记之FS文件模块
Jan 13 #NodeJs
You might like
Extended CHM PHP 语法手册之 DIY
2006/10/09 PHP
比较时间段一与时间段二是否有交集的php函数
2011/05/31 PHP
php读取目录所有文件信息dir示例
2014/03/18 PHP
php上传中文文件名乱码问题处理方案
2015/02/03 PHP
thinkphp关于简单的权限判定方法
2017/04/03 PHP
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
Knockoutjs的环境搭建教程
2012/11/26 Javascript
js showModalDialog参数的使用详解
2014/01/07 Javascript
javascript中为某个元素指定事件的三种方式
2014/08/07 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
2015/04/12 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
2015/07/26 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
2016/04/29 Javascript
jquery自动补齐功能插件flexselect用法示例
2016/08/06 Javascript
js 判断附件后缀的简单实现方法
2016/10/11 Javascript
knockoutjs模板实现树形结构列表
2017/07/31 Javascript
shiro授权的实现原理
2017/09/21 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
2018/08/27 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
在react中使用vue的状态管理的方法示例
2020/05/02 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
2020/06/02 Javascript
[03:56]DOTA2完美大师赛趣味视频之小鸽子和Mineski打台球
2017/11/24 DOTA
详解Python3中的迭代器和生成器及其区别
2018/10/09 Python
pandas进行时间数据的转换和计算时间差并提取年月日
2019/07/06 Python
python实现手势识别的示例(入门)
2020/04/15 Python
如何在windows下安装Pycham2020软件(方法步骤详解)
2020/05/03 Python
瑞士国际航空官网:SWISS
2016/07/21 全球购物
一些网络技术方面的面试题
2014/05/01 面试题
高中毕业自我鉴定
2013/12/22 职场文书
高三历史教学反思
2014/01/09 职场文书
幼儿教师考核制度
2014/01/25 职场文书
创建卫生先进单位实施方案
2014/03/10 职场文书
廉洁使者实施方案
2014/03/29 职场文书
2014年安全生产大检查方案
2014/05/13 职场文书
施工员岗位职责范本
2015/04/11 职场文书
pytorch fine-tune 预训练的模型操作
2021/06/03 Python
iOS 16进一步确认,一共支持16款iPhone
2022/04/28 数码科技