脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → node.js → nodejs 整合kindEditor实现图片上传

nodejs 整合kindEditor实现图片上传

 更新时间：2015年02月03日 11:10:12   投稿：hebedich  
这篇文章主要介绍了nodejs 整合kindEditor实现图片上传,需要的朋友可以参考下

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;">
        &lt;strong&gt;HTML内容&lt;/strong&gt;
    </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服务器（5）：事件处理程序

    轻松创建nodejs服务器（5）：事件处理程序

    这篇文章主要介绍了轻松创建nodejs服务器（5）：事件处理程序,本系列文章将一步一步创建一个完整的nodejs服务器,需要的朋友可以参考下
    2014-12-12
  • 一步步教你使用node搭建一个小页面

    一步步教你使用node搭建一个小页面

    最近使用NodeJs搭建的小型web应用,所以下面这篇文章主要给大家介绍了关于使用node搭建一个小页面的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • 用C/C++来实现 Node.js 的模块（一）

    用C/C++来实现 Node.js 的模块（一）

    这篇文章的主要内容其实简而言之就是——用C/C++来实现 Node.js 的模块，非常的不错，有需要的朋友可以参考下
    2014-09-09
  • Nodejs中session的简单使用及通过session实现身份验证的方法

    Nodejs中session的简单使用及通过session实现身份验证的方法

    session的本质使用cookie来实现。本文给大家介绍Nodejs中session的简单使用及通过session实现身份验证的方法，对node.js session相关知识感兴趣的朋友一起学习吧
    2016-02-02
  • nodejs批量修改文件编码格式

    nodejs批量修改文件编码格式

    本文给大家分享一段代码，主要是解决了在项目中遇到的一个问题，批量将GBK编码转换为UTF8，非常实用，推荐给大家。
    2015-01-01
  • Node.js+Express配置入门教程

    Node.js+Express配置入门教程

    Node.js是一个Javascript运行环境(runtime)。本文给大家介绍Node.js+Express配置入门教程，值得推荐给大家，感兴趣的朋友一起学习吧
    2016-05-05
  • Node.js安装配置图文教程

    Node.js安装配置图文教程

    这篇文章主要为大家详细介绍了Node.js安装配置的图文教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门

    零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门

    这篇文章主要介绍了零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门,本文在windows8系统下完成本教程,其它系统也可参考,需要的朋友可以参考下
    2014-12-12
  • 使用Node操作文件夹的常用API

    使用Node操作文件夹的常用API

    这篇文章我们将学习Node对文件夹的操作,当我们学习完文件夹的操作后结合文件的操作我们就可以真正的通过Node在日常的工作生活中解决许多和文件相关的问题,这篇文章我们将首先讲解文件夹操作的几个API,然后完成一下最常见的文件夹递归的操作,需要的朋友可以参考下
    2024-08-08
  • node实现批量上传本地图片转为图片CDN的项目实践

    node实现批量上传本地图片转为图片CDN的项目实践

    本文主要介绍了node实现批量上传本地图片转为图片CDN的项目实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07

最新评论