nodejs 整合kindEditor實(shí)現(xiàn)圖片上傳
kindEditor官網(wǎng)上中提供了ASP,ASP.NET,JSP相關(guān)的整合應(yīng)用,http://kindeditor.net/docs/upload.html可以參照實(shí)現(xiàn)nodejs的整合,發(fā)現(xiàn)實(shí)用nodejs更簡(jiǎn)單
環(huán)境:
unbuntu 14.10
nodejs 0.10.35
express 4.11.2
formidable 1.0.16
kindEditor 4.1.10
webStorm 8
1.通過(guò)IDE或終端創(chuàng)建一個(gè)名稱為test的工程
2.編輯package.json添加formidable依賴,這里使用的是1.0.16版本,之后通過(guò)終端執(zhí)行npm install完成依賴的安裝
3.將kindEditor整個(gè)目錄放到test/public/lib下
4.修改index.ejs和index.js文件
index.ejs中整合kindEditor:
設(shè)置kindEditor的uploadJson為nodejs所提供的處理圖片上傳的路由url這里用的是/uploadImg
index.js中添加處理圖片上傳的路由url:
添加/uploadImg對(duì)應(yīng)的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內(nèi)容</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;
之后通過(guò)IDE或終端啟動(dòng)test工程,通過(guò)http://localhost:3000訪問(wèn)頁(yè)面就可以上傳圖片了
- kindeditor 加入七牛云上傳的實(shí)例講解
- Kindeditor編輯器添加圖片上傳水印功能（php代碼）
- Kindeditor單獨(dú)調(diào)用單圖上傳增加預(yù)覽功能的實(shí)例
- Kindeditor單獨(dú)調(diào)用多圖上傳實(shí)例
- node.js中實(shí)現(xiàn)kindEditor圖片上傳功能的方法教程
- asp.net core集成kindeditor實(shí)現(xiàn)圖片上傳功能
- js控件Kindeditor實(shí)現(xiàn)圖片自動(dòng)上傳功能
- KindEditor圖片上傳的Asp.net代碼實(shí)例
- springmvc+kindeditor文件上傳實(shí)例詳解
相關(guān)文章
輕松創(chuàng)建nodejs服務(wù)器（5）：事件處理程序
這篇文章主要介紹了輕松創(chuàng)建nodejs服務(wù)器（5）：事件處理程序,本系列文章將一步一步創(chuàng)建一個(gè)完整的nodejs服務(wù)器,需要的朋友可以參考下2014-12-12
最近使用NodeJs搭建的小型web應(yīng)用,所以下面這篇文章主要給大家介紹了關(guān)于使用node搭建一個(gè)小頁(yè)面的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
用C/C++來(lái)實(shí)現(xiàn) Node.js 的模塊（一）
這篇文章的主要內(nèi)容其實(shí)簡(jiǎn)而言之就是——用C/C++來(lái)實(shí)現(xiàn) Node.js 的模塊，非常的不錯(cuò)，有需要的朋友可以參考下2014-09-09
Nodejs中session的簡(jiǎn)單使用及通過(guò)session實(shí)現(xiàn)身份驗(yàn)證的方法
session的本質(zhì)使用cookie來(lái)實(shí)現(xiàn)。本文給大家介紹Nodejs中session的簡(jiǎn)單使用及通過(guò)session實(shí)現(xiàn)身份驗(yàn)證的方法，對(duì)node.js session相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-02-02
本文給大家分享一段代碼，主要是解決了在項(xiàng)目中遇到的一個(gè)問(wèn)題，批量將GBK編碼轉(zhuǎn)換為UTF8，非常實(shí)用，推薦給大家。2015-01-01
Node.js是一個(gè)Javascript運(yùn)行環(huán)境(runtime)。本文給大家介紹Node.js+Express配置入門(mén)教程，值得推薦給大家，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
這篇文章主要為大家詳細(xì)介紹了Node.js安裝配置的圖文教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
零基礎(chǔ)搭建Node.js、Express、Ejs、Mongodb服務(wù)器及應(yīng)用開(kāi)發(fā)入門(mén)
這篇文章主要介紹了零基礎(chǔ)搭建Node.js、Express、Ejs、Mongodb服務(wù)器及應(yīng)用開(kāi)發(fā)入門(mén),本文在windows8系統(tǒng)下完成本教程,其它系統(tǒng)也可參考,需要的朋友可以參考下2014-12-12
這篇文章我們將學(xué)習(xí)Node對(duì)文件夾的操作,當(dāng)我們學(xué)習(xí)完文件夾的操作后結(jié)合文件的操作我們就可以真正的通過(guò)Node在日常的工作生活中解決許多和文件相關(guān)的問(wèn)題,這篇文章我們將首先講解文件夾操作的幾個(gè)API,然后完成一下最常見(jiàn)的文件夾遞歸的操作,需要的朋友可以參考下2024-08-08
node實(shí)現(xiàn)批量上傳本地圖片轉(zhuǎn)為圖片CDN的項(xiàng)目實(shí)踐
本文主要介紹了node實(shí)現(xiàn)批量上傳本地圖片轉(zhuǎn)為圖片CDN的項(xiàng)目實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07