用Express和Jade搭建Web扫描和上传应用

最新推荐文章于 2026-06-23 13:18:38 发布

转载最新推荐文章于 2026-06-23 13:18:38 发布 · 1k 阅读

Express是一个用于nodejs的Web框架，通过配合模板引擎Jade，可以让Web应用的开发更加简洁高效。这里学习下如何使用Express和Jade来改造Web扫描上传应用。

参考原文：Document Scanning and Uploading in Node.js with Express and Jade

使用Express Application Generator创建工程

全局安装express generator：

1	`npm` `install` `express-generator -g`

通过命令行创建一个Dynamic Web TWAIN的工程：

1	`express Dynamic_Web_TWAIN`

看一下package.json里面的东西：

 
         {
        
         "name": "Dynamic_Web_TWAIN",
        
         "version": "0.0.0",
        
         "private": true,
        
         "scripts": {
        
         "start": "node ./bin/www"
        
         },
        
         "dependencies": {
        
         "body-parser": "~1.10.2",
        
         "cookie-parser": "~1.3.3",
        
         "debug": "~2.1.1",
        
         "express": "~4.11.1",
        
         "jade": "~1.9.1",
        
         "morgan": "~1.5.1",
        
         "serve-favicon": "~2.2.0"
        
         }
        
         }

依赖的库都已经在了，现在通过命令来安装这些库：

1	`npm` `install`

运行程序：

1	`node .` `/bin/www`

现在可以试着打开http://localhost:3000/来访问一下页面。

使用Jade重写DWT应用代码

为了实现文件上传，我们需要在package.json里面增加一个依赖库multer：

现在把DWT SDK中的resources目录拷贝到public文件夹里：

打开/routes/index.js，修改title：

1

2

3

 
         router.get('/', function(req, res, next) {
        
         res.render('index', { title: 'Dynamic Web TWAIN Demo' });
        
         });

现在开始编辑jade模板。打开layout.jade，把需要用到的js文件include进来：

1 2	`script(src='/Resources/dynamsoft.webtwain.initiate.js')` `script(src='/Resources/dynamsoft.webtwain.config.js')`

打开index.jade，把原来的HTML语言转换成jade的语法：

 
         extends layout
        
         block content
        
         h1= title
        
         p Welcome to #{title}
        
         #dwtcontrolContainer
        
         input(
        
         type='button'
        
         value='Acquire'
        
         onclick='AcquireImage()'
        
         )
        
         input(
        
         id='btnUpload'
        
         type='button'
        
         value='Upload Image'
        
         onclick='btnUpload_onclick()'
        
         )
        
         script(type='text/javascript').
        
         function AcquireImage(){
        
         DWObject.IfShowUI = false;
        
         DWObject.SelectSource();
        
         DWObject.OpenSource();
        
         DWObject.AcquireImage();
        
         }
        
         function btnUpload_onclick() {
        
         DWObject.HTTPPort = 3000;
        
         var CurrentPathName = unescape(location.pathname); // get current PathName in plain ASCII
        
         var CurrentPath = CurrentPathName.substring(0, CurrentPathName.lastIndexOf("/") + 1);
        
         var strActionPage = CurrentPath + "upload";
        
         var strHostIP = "localhost";
        
         var sFun = function(){
        
         alert('successful');
        
         }, fFun = function(){
        
         };
        
         DWObject.HTTPUploadThroughPostEx(
        
         strHostIP,
        
         DWObject.CurrentImageIndexInBuffer,
        
         strActionPage,
        
         "test.jpg",
        
         1,// JPEG
        
         sFun, fFun
        
         );
        
         }

对应的HTML是这样的：

 
         <!
         DOCTYPE 
         html><
         html
         ><
         head
         ><
         title
         >DWT Hello World</
         title
         ><
         link 
         rel
         =
         "stylesheet" 
         href
         =
         "/stylesheets/style.css"
         ><
         script 
         src
         =
         "/Resources/dynamsoft.webtwain.initiate.js"
         ></
         script
         ><
         script 
         src
         =
         "/Resources/dynamsoft.webtwain.config.js"
         ></
         script
         ></
         head
         ><
         body
         ><
         h1
         >Dynamic Web TWAIN Demo</
         h1
         ><
         p
         >Welcome to Dynamic Web TWAIN Demo</
         p
         ><
         div 
         id
         =
         "dwtcontrolContainer"
         ></
         div
         ><
         input 
         type
         =
         "button" 
         value
         =
         "Acquire" 
         onclick
         =
         "AcquireImage()"
         ><
         input 
         id
         =
         "btnUpload" 
         type
         =
         "button" 
         value
         =
         "Upload Image" 
         onclick
         =
         "btnUpload_onclick()"
         ><
         script 
         type
         =
         "text/javascript"
         >function AcquireImage(){
        
 
             
         DWObject.IfShowUI = false;
        
 
             
         DWObject.SelectSource();
        
 
             
         DWObject.OpenSource();
        
 
             
         DWObject.AcquireImage();
        
 
             
         }
        
 
             
         function btnUpload_onclick() {
        
 
                 
         DWObject.HTTPPort = 3000;
        
 
                 
         var CurrentPathName = unescape(location.pathname); // get current PathName in plain ASCII
        
 
                 
         var CurrentPath = CurrentPathName.substring(0, CurrentPathName.lastIndexOf("/") + 1);
        
 
                 
         var strActionPage = CurrentPath + "upload";
        
 
                 
         var strHostIP = "localhost";
        
 
                 
         var sFun = function(){
        
 
                     
         alert('successful');
        
 
                 
         }, fFun = function(){
        
 
           
        
 
                 
         };
        
 
                 
         DWObject.HTTPUploadThroughPostEx(
        
 
                 
         strHostIP,
        
 
                 
         DWObject.CurrentImageIndexInBuffer,
        
 
                 
         strActionPage,
        
 
                 
         "test.jpg",
        
 
                 
         1,// JPEG
        
 
             
         sFun, fFun
        
 
             
         );
        
 
             
         }</
         script
         ></
         body
         ></
         html
         >
        

创建一个上传目录upload 用于接收上传的文件，并用时间来重命名。在目录routes中，创建一个文件upload.js：

 
         var express = require('express'); 
        
         var router = express.Router(); 
        
         var multer = require('multer');
        
         router.use(multer({dest:"./upload/", 
        
         rename: function (fieldname, filename) {
        
         return Date.now()
        
         }
        
         }));
        
         module.exports = router;