目标

1. 在浏览器地址栏输入“http://demos/start”，进入欢迎页面，页面有一个文件上传表单；

2. 选择一张图片并提交表单，文件被上传到"http://demos/uploads"上传完成把该图片显示在页面上。

功能模块分解

1. 需要提供欢迎页，所以需要一个http服务器；

2. 对于不同请求，根据url，服务器能给与不同响应，需要路由，把请求对应到相应的请求处理程序（request handler）

3. 需要请求处理程序；

4. 路由处理post数据，并把数据封装成更加友好的格式传递给处理程序，需要数据处理功能；

5. 需要视图逻辑供请求处理程序使用，以便将结果返回给浏览器；

6. 需要上传处理功能处理上传细节。

如果是php实现，我们需要apache http服务器并配置mod_php5模块，那么整个“接收请求并回复“并不需要php来做。而使用nodejs，不仅仅是实现应用，同时还实现了http服务器。

一个基础的http服务器

nodejs支持模块化，有利于编写干净的代码。除了内置的模块，我们可以将自己的不同功能的代码放进不同模块中，说白了就是写在不同文件中。

创建js文件取名server.js，写入代码如下：

  1.  var http = require('http');
  2.  
  3.  http.createServer(function(req,res){
  4.    res.writeHead(200,{'Content-Type':'text/html'});
  5.    res.write('<h1>Node.js</h1>');
  6.    res.end("");
  7.  }).listen(3000,'127.0.0.1');
  1. node server.js

浏览器输入"http://localhost:3000"，显示”Node.js“。

服务器简单分析

第一行，require请求nodejs内置的http模块，赋给http变量；接着调用http模块的createServer方法，返回一个对象，这个对象有一个叫做listen的方法，这个方法的参数指定http服务器监听的端口号。createServer方法的匿名函数是该方法仅仅需要的一个参数，js中函数和变量一样可以传递。

使用这种方式是因为nodejs是事件驱动的。

当我们使用php时，任何时候每当有请求进入，apache就为这一新请求新建一个进程，并从头到尾的执行php脚本。htpp.createServer不仅仅是建一个侦听某端口的服务器，我们还想要他在收到http请求时做点什么。而nodejs是异步的：请求任何时候都可能到达，但是他却跑在一个单进程中。

当一个请求到达3000端口时怎么控制流程呢？这时候nodejs/javascript的事件驱动机制派上用场了。

我们向创建服务器的方法传递了一个函数，任何时候服务器收到请求，这个函数就会被调用，被用作处理请求的的地方。

服务器如何处理请求

当服务器加收请求回调的匿名函数被触发的时候，有两参数传入：request和response。利用这两个对象的方法处理请求的细节，并返回应答。

使用response.writeHead()发送一个http状态200和http头的内容类型等，使用response.write()在响应主体中发送文本，而使用response.end()完成应答。

封装为模块：

  1.  var http = require('http');
  2.  
  3.  function serverStart(){
  4.          http.createServer(function(req,res){
  5.              console.log('http request recieve');
  6.  
  7.            res.writeHead(200,{'Content-Type':'text/html'});
  8.            res.write('<h1>Node.js</h1>');
  9.            res.end("");
  10.          }).listen(3000,'127.0.0.1');
  11.  
  12.          console.log('http server start on port 3000');
  13.  }
  14.  
  15.  exports.serverStart = serverStart;

第一行http是内置的模块，这里封装了我们自己的模块，通过关键字exports露出接口方法，模块名为该文件名server，之后”server模块“可以被其他模块引用。

创建index.js文件，写入代码并引用server模块：

  1.  var server = require("./server");
  2.  
  3.  server.serverStart();

对请求进行路由选择

为路由提供请求的url和其他GET和POST参数，路由根据这些数据来分发请求到具体的处理程序。因此，我们需要查看并解析http请求，提取出url和get/post参数，暂且将这一解析功能归于http服务器一部分。请求数据都包含在request对象中，引入内置模块url和querystring来解析它。

  1.  var http = require('http');
  2.  var url = require('url');
  3.  
  4.  function serverStart(){
  5.          http.createServer(function(req,res){
  6.              var pathname = url.parse(req.url).pathname;
  7.              console.log('http request for '+pathname+' recieved');
  8.  
  9.            res.writeHead(200,{'Content-Type':'text/html'});
  10.            res.write('<h1>Node.js</h1>');
  11.            res.end("");
  12.          }).listen(3000,'127.0.0.1');
  13.  
  14.          console.log('http server start on port 3000');
  15.  }
  16.  
  17.  exports.serverStart = serverStart;

通过第6行的解析，不同的请求路径在第7行输出不同的pathname。

建立一个名为router.js的文件，编写路由代码如下：

  1.  function route(pathname){
  2.    console.log('about to route a request for'+pathname);
  3.  }
  4.  
  5.  exports.route = route;

服务器应该知道路由的存在，并加以组合有效地利用。这里可以采用硬编码方式或依赖注入的方式实现组合，后者更好。

改造server.js如下：

  1.  var http = require('http');
  2.  var url = require('url');
  3.  
  4.  function serverStart(route){
  5.          http.createServer(function(req,res){
  6.              var pathname = url.parse(req.url).pathname;
  7.              console.log('http request for '+pathname+' recieved');
  8.  
  9.              route(pathname);
  10.  
  11.            res.writeHead(200,{'Content-Type':'text/html'});
  12.            res.write('<h1>Node.js</h1>');
  13.            res.end("");
  14.          }).listen(3000,'127.0.0.1');
  15.  
  16.          console.log('http server start on port 3000');
  17.  }
  18.  
  19.  exports.serverStart = serverStart;

改造index.js如下：

  1.  var server = require("./server");
  2.  var router = require("./router");
  3.  
  4.  server.serverStart(router.route);

编译运行，可看到路由模块被server模块引入。

行为驱动执行

在index中，我们将router对象传递进去，服务器随后调用这个对象的route函数。但其实服务器自身并不需要这个对象，它只是需要执行某个动作，而这个动作由该对象来完成。具体的细节服务器并不关心，因为这是执行这个动作的那个对象的事。这就是函数式编程。但归根结底，到了最后一层总有一个对象是真正关心细节并完成细节，输出结果的。像现实世界的上级把任务给下级，下级给再下级，最终总要有人完成这个任务才好！

路由到处理程序

路由用来转发请求，将请求分发给实际的处理程序，让他们解决请求并回复，因此新建请求处理模块requestHandlers.js，代码如下：

  1.  function start(){
  2.    console.log("request handler 'start' was called");
  3.  }
  4.  
  5.  function upload(){
  6.    console.log("request handler 'upload' was called");
  7.  }
  8.  
  9.  exports.start = start;
  10.  exports.upload = upload;

有了这个模块，路由就有路可寻了。

现在需要将处理程序通过一个对象来传递并将对象注入到route()函数中，而javascript的对象是”key:value“组合，满足我们的需要。将存放处理程序的对象引入index，如下：

  1.  var server = require("./server");
  2.  var router = require("./router");
  3.  var requestHandlers = require("./requestHandlers");
  4.  
  5.  var handler = {};
  6.  handler['/'] = requestHandlers.start;
  7.  handler['/start'] = requestHandlers.start;
  8.  handler['/upload'] = requestHandlers.upload;
  9.  
  10.  server.serverStart(router.route,handler);

路径为”/“或"/start"的请求由start处理，"/upload"由upload处理。

将该对象作为参数传给服务器，server.js模块代码改为：

  1.  var http = require('http');
  2.  var url = require('url');
  3.  
  4.  function serverStart(route,handle){
  5.          http.createServer(function(req,res){
  6.              var pathname = url.parse(req.url).pathname;
  7.              console.log('http request for ''+pathname+'' recieved');
  8.  
  9.              route(handle,pathname);
  10.  
  11.            res.writeHead(200,{'Content-Type':'text/html'});
  12.            res.write('<h1>Node.js</h1>');
  13.            res.end("");
  14.          }).listen(3000,'127.0.0.1');
  15.  
  16.          console.log('http server start on port 3000');
  17.  }
  18.  
  19.  exports.serverStart = serverStart;

handle对象传递给了route，此时还得修改router模块，如下：

  1.  function route(handle,pathname){
  2.    console.log('about to route a request for'+pathname);
  3.  
  4.      if(typeof handle[pathname] === 'function'){
  5.        handle[pathname]();
  6.      }
  7.      else{
  8.        console.log('no request handler found for'+pathname);
  9.      }
  10.  }
  11.  
  12.  exports.route = route;

首先检查对应的处理程序是否存在，存在则直接调用相应的函数，否则提示没有找到对应的函数。这时，服务器，路由，处理程序就联系在一起了。

让请求处理程序作出响应

web程序一般是基于http的请求-应答模式，这样服务器和浏览器可以实现通话。

一种不好的实现方式

这种方式让服务器的函数直接返回展示给用户的信息。这就需要同时修改服务器、路由、请求处理函数的部分代码：

requestHandlers.js

  1.  function start(){
  2.    console.log("request handler 'start' was called");
  3.    return "hello start!";
  4.  }
  5.  
  6.  function upload(){
  7.    console.log("request handler 'upload' was called");
  8.    return "hello upload!";
  9.  }
  10.  
  11.  exports.start = start;
  12.  exports.upload = upload;

requestHandlers.js

  1.  function route(handle,pathname){
  2.    console.log('about to route a request for'+pathname);
  3.  
  4.      if(typeof handle[pathname] === 'function'){
  5.        return handle[pathname]();
  6.      }
  7.      else{
  8.        console.log('no request handler found for'+pathname);
  9.        return "404 not found!"
  10.      }
  11.  }
  12.  
  13.  exports.route = route;

server.js

  1.  var http = require('http');
  2.  var url = require('url');
  3.  
  4.  function serverStart(route,handle){
  5.          http.createServer(function(req,res){
  6.              var pathname = url.parse(req.url).pathname;
  7.              console.log('http request for '+pathname+' recieved');
  8.  
  9.            res.writeHead(200,{'Content-Type':'text/html'});
  10.            var content = route(handle,pathname);
  11.            res.write(content);
  12.            res.end("");
  13.          }).listen(3000,'127.0.0.1');
  14.  
  15.          console.log('http server start on port 3000');
  16.  }
  17.  
  18.  exports.serverStart = serverStart;

这样的模式运行的也很好，但当有请求处理程序需要执行非阻塞操作，就“挂”了。

阻塞与非阻塞

修改requestHandlers.js

  1.  function start(){
  2.    console.log("request handler 'start' was called");
  3.  
  4.    function sleep(milliSeconds){
  5.        var startTime = new Date().getTime();
  6.        while(new Date().getTime() < startTime + milliSeconds)
  7.          ;
  8.    }
  9.  
  10.    sleep(10000);
  11.    return "hello start!";
  12.  }
  13.  
  14.  function upload(){
  15.    console.log("request handler 'upload' was called");
  16.    return "hello upload!";
  17.  }
  18.  
  19.  exports.start = start;
  20.  exports.upload = upload;

上述的sleep函数会让方法停顿10秒，然后才会返回结果。实际场景中，需要计算或是查找数据库等阻塞操作非常多。

现在通过start和upload即可模拟阻塞，打开两个空白页面分别输入“localhost:3000/start”和"localhost:3000/upload"，先进行start请求在快速切换到量以页面进行upload请求，发现start页面请求恢复用了10秒，而upload也用了10秒。原因是，start中的sleep阻塞了所有其他处理。

而nodejs的特性之一是——单线程，可以在不增加线程情况下，对任务进行并行处理。这里的机制是它使用轮询(event loop)来实现并行操作，所有尽量避免阻塞操作而是用非阻塞操作。要使用非阻塞，需要使用回调，将函数作为参数传递给其他需要费时间处理的函数。

对于nodejs可以形象比喻成“嘿，probablyExpensiveFunction()（需要费时间处理的函数），继续做你的事情，我（nodejs线程）先不等你了，继续去处理后面的代码，请你提供一个回调callBackFunction()，等你处理完了我会去调用该回调函数的。”

一种错误的非阻塞方式

requestHandlers.js

  1.  var exec = require("child_process").exec;
  2.  
  3.  function start(){
  4.    console.log("request handler 'start' was called");
  5.    var content = "empty";
  6.  
  7.    exec("ls-lah",function(error,stdout,stderr){
  8.        content = stdout;
  9.    });
  10.    return content;
  11.  }
  12.  
  13.  function upload(){
  14.    console.log("request handler 'upload' was called");
  15.    return "hello upload!";
  16.  }
  17.  
  18.  exports.start = start;
  19.  exports.upload = upload;

引入另一个模块“child_process”，实现非阻塞操作exec()。

exec()的作用是从nodejs执行一个shell命令，例子中使用它获取当前目录下所有文件("ls-lah")，然后当start请求时将文件信息输出到浏览器。执行该例子，浏览器输出“empty”。原因在于，nodejs是同步执行，而为了非阻塞，exec()使用了回调函数，回调函数作为参数传递给exec(),而exec()是异步操作，即当他还没来得及执行回调，nodejs的同步性致使nodejs执行了exec()的下一个语句，这时候content并没有等来exec()的赋值，因此他还是“empty”。这和javascript中的同步异步很相像，每当需要执行ajax，并且需要ajax的结果时，我们将下一步的代码放在ajax执行成功时的回调里。

非阻塞方式对请求进行响应

我们可以采用值传递的方式将请求处理函数返回的内容再回传给http服务器。上述方式都是将请求处理函数的结果返回给http服务器，而另一种方式是将服务器传递给内容，即将response对象传递给请求处理程序，程序随后采用该对象上的方法对对请求进行响应。

server.js

  1.  var http = require('http');
  2.  var url = require('url');
  3.  
  4.  function serverStart(route,handle){
  5.          http.createServer(function(req,res){
  6.              var pathname = url.parse(req.url).pathname;
  7.              console.log('http request for '+pathname+' recieved');
  8.  
  9.            route(handle,pathname,res);
  10.  
  11.          }).listen(3000,'127.0.0.1');
  12.  
  13.          console.log('http server start on port 3000');
  14.  }
  15.  
  16.  exports.serverStart = serverStart;

以上将server.js中有关response的函数调用全部移除，将response对象传给route。

router.js

  1.  function route(handle,pathname,response){
  2.    console.log('about to route a request for'+pathname);
  3.  
  4.      if(typeof handle[pathname] === 'function'){
  5.        return handle[pathname](response);
  6.      }
  7.      else{
  8.        console.log('no request handler found for'+pathname);
  9.        response.writeHead(404,{"Content-Type":"text/plain"});
  10.        response.write("404 not found!");
  11.        response.end();
  12.      }
  13.  }
  14.  
  15.  exports.route = route;

requestHandlers.js

  1.  var exec = require("child_process").exec;
  2.  
  3.  function start(response){
  4.    console.log("request handler 'start' was called");  
  5.  
  6.    exec("ls-lah",function(error,stdout,stderr){
  7.         response.writeHead(200,{"Content-Type":"text/plain"});
  8.         response.write(stdout);
  9.         response.end();
  10.    });    
  11.  
  12.  }
  13.  
  14.  function upload(response){
  15.    console.log("request handler 'upload' was called");
  16.  
  17.    response.writeHead(200,{"Content-Type":"text/plain"});
  18.      response.write("hello upload");
  19.      response.end();
  20.  }
  21.  
  22.  exports.start = start;
  23.  exports.upload = upload;

处理程序接收response对象，由该对象做出直接响应。在此编译，打开浏览器请求，“localhost:3000/start”不会对"localhost:3000/upload"造成阻塞。

更有用的场景

处理post请求

  1.  var exec = require("child_process").exec;
  2.  
  3.  function start(response){
  4.    console.log("request handler 'start' was called");  
  5.  
  6.    var body = '<html>'+'<head>'+'<body>'+'<form action="/upload" method="post">'+'<textarea name="text" rows="20" cols="50"></textarea>'+
  7.          '<input type="submit" value="submit"/>'+'</form></body></html>';
  8.  
  9.    response.writeHead(200,{"Content-Type":"text/html"});
  10.      response.write(body);
  11.      response.end();         
  12.  
  13.  }
  14.  
  15.  function upload(response){
  16.    console.log("request handler 'upload' was called");
  17.  
  18.    response.writeHead(200,{"Content-Type":"text/plain"});
  19.      response.write("hello upload");
  20.      response.end();
  21.  }
  22.  
  23.  exports.start = start;
  24.  exports.upload = upload;

以上是修改后的requestHandlers.js，运行后是个简单的表单，包括文本域和提交按钮。post数据有时候会很大，为使过程不阻塞，nodejs会将post数据拆分成很多很小的数据块，然后通过触发特定的事件，将这些小数据块传给回调函数。特定事件有data（表示新的小数据块到了）和end（表示所有数据块都已经接收完毕）。这时候我们需要告诉nodejs事件触发的时候调用哪些回调函数，通过什么方式告诉呢？在request对象上注册监听器（listener）来实现。获取所有来自请求端的数据并将数据传给应用层处理，是http服务器的事。所以直接在server里处理post数据，然后将最终的数据传给路由和请求处理器，让他们来进一步处理。

server.js

  1.  function serverStart(route,handle){
  2.          http.createServer(function(req,res){
  3.              var postData = "";
  4.              var pathname = url.parse(req.url).pathname;
  5.              console.log('http request for '+pathname+' recieved');
  6.  
  7.              request.setEncoding("utf8");
  8.  
  9.              request.addListener("data",function(postDataChunk){
  10.                postData += postDataChunk;
  11.                console.log('received post data chunk'+postDataChunk+".");
  12.              });
  13.  
  14.              request.addListener("end",function(postDataChunk){
  15.                route(handle,pathname,res,postData);
  16.              });                                      
  17.  
  18.          }).listen(3000,'127.0.0.1');
  19.  
  20.          console.log('http server start on port 3000');
  21.  }
  22.  
  23.  exports.serverStart = serverStart;

上述代码做了3件事，首先设置接收数据格式为utf8，然后绑定data事件的监听器，用于接收每次传递的新数据块，复制给postData，最后将路由调用移到end中，确保数据接收完成在触发并且只触发一次。

requestHandlers.js

  1.  var querystring = require("querystring");
  2.  function start(response,postData){
  3.    console.log("request handler 'start' was called");  
  4.  
  5.    var body = '<html>'+'<head>'+'<body>'+'<form action="/upload" method="post">'+'<textarea name="text" rows="20" cols="50"></textarea>'+
  6.          '<input type="submit" value="submit"/>'+'</form></body></html>';
  7.  
  8.    response.writeHead(200,{"Content-Type":"text/html"});
  9.      response.write(body);
  10.      response.end();         
  11.  
  12.  }
  13.  
  14.  function upload(response,postData){
  15.    console.log("request handler 'upload' was called");
  16.  
  17.    response.writeHead(200,{"Content-Type":"text/plain"});
  18.      response.write("you are sent:"+querystring.parse(postData).text);
  19.      response.end();
  20.  }
  21.  
  22.  exports.start = start;
  23.  exports.upload = upload;

通过querystring筛选出我们感兴趣的部分，以上就是关于post数据处理的内容。

处理文件上传

处理文件上传就是处理post数据，有时候麻烦的是细节处理。所以这里使用现成的方案，即外部模块node-formidable，用nmp命令安装：

nmp install formidable

该模块做的就是通过http post请求提交的表单，在nodejs中可以被解析。我们创建一个IncomingForm，它是对提交的表单的抽象表示，之后就可以用他来解析request对象，获取需要的字段数据。关于该模块具体信息及工作原理，其官网有实例。

现在的问题是保存在本地硬盘的内容如何显示在浏览器中。我们需要将其读取到服务器，使用fs模块完成。

  1.  var querystring = require("querystring"),
  2.      fs = require("fs");
  3.  function start(response,postData){
  4.    console.log("request handler 'start' was called");  
  5.  
  6.    var body = '<html>'+'<head>'+'<body>'+'<form action="/upload" method="post">'+'<textarea name="text" rows="20" cols="50"></textarea>'+
  7.          '<input type="submit" value="submit"/>'+'</form></body></html>';
  8.  
  9.    response.writeHead(200,{"Content-Type":"text/html"});
  10.      response.write(body);
  11.      response.end();         
  12.  
  13.  }
  14.  
  15.  function upload(response,postData){
  16.    console.log("request handler 'upload' was called");
  17.  
  18.    response.writeHead(200,{"Content-Type":"text/plain"});
  19.      response.write("you are sent:"+querystring.parse(postData).text);
  20.      response.end();
  21.  }
  22.  
  23.  function show(response,postData){
  24.    console.log("request handler 'show' was called");
  25.    fs.readFile("/tmp/test.png","binary",function(error,file){
  26.        if(error){
  27.             response.writeHead(500,{"Content-Type":"text/plain"});
  28.             response.write(error+"\n");
  29.               response.end();
  30.        }else{
  31.            response.writeHead(200,{"Content-Type":"image/png"});
  32.            response.write(file,"binary");
  33.            response.end();
  34.        }
  35.    });
  36.  }
  37.  
  38.  exports.start = start;
  39.  exports.upload = upload;
  40.  exports.show = show;

将其添加到index.js的路由映射表中：

  1.  var server = require("./server");
  2.  var router = require("./router");
  3.  var requestHandlers = require("./requestHandlers");
  4.  
  5.  var handler = {};
  6.  handler['/'] = requestHandlers.start;
  7.  handler['/start'] = requestHandlers.start;
  8.  handler['/upload'] = requestHandlers.upload;
  9.  handler['/show'] = requestHandlers.show;
  10.  
  11.  server.serverStart(router.route,handler);

编译，浏览器请求即可看见图片。

最后，

需要在/start表单添加文件上传元素

将formidable整合到upload中用于将上传的图片保存到指定路径

将上传的图片内嵌到/upload url输出的html中

第一项，移除此前的文本区，添加上传组件和“multipart/form-data”编码类型：

  1.  var querystring = require("querystring"),
  2.      fs = require("fs");
  3.  function start(response,postData){
  4.    console.log("request handler 'start' was called");  
  5.  
  6.    var body = '<html>'+'<head>'+'<body>'+'<form action="/upload" method="post" enctype="multipart/form-data">'+
  7.          '<input type="file" name="upload"/><input type="submit" value="upload file">'+'</form></body></html>';
  8.  
  9.    response.writeHead(200,{"Content-Type":"text/html"});
  10.      response.write(body);
  11.      response.end();         
  12.  
  13.  }
  14.  
  15.  function upload(response,postData){
  16.    console.log("request handler 'upload' was called");
  17.  
  18.    response.writeHead(200,{"Content-Type":"text/plain"});
  19.      response.write("you are sent:"+querystring.parse(postData).text);
  20.      response.end();
  21.  }
  22.  
  23.  function show(response,postData){
  24.    console.log("request handler 'show' was called");
  25.    fs.readFile("/tmp/test.png","binary",function(error,file){
  26.        if(error){
  27.             response.writeHead(500,{"Content-Type":"text/plain"});
  28.             response.write(error+"\n");
  29.               response.end();
  30.        }else{
  31.            response.writeHead(200,{"Content-Type":"image/png"});
  32.            response.write(file,"binary");
  33.            response.end();
  34.        }
  35.    });
  36.  }
  37.  
  38.  exports.start = start;
  39.  exports.upload = upload;
  40.  exports.show = show;

这时候我们需要在upload中对请求中的上传文件进行处理，这样的话需要将request传给node-formidable的form-parse函数。由于nodejs不会对数据作缓冲，于是必须将request对象传入。

server.js:

  1.  var http = require('http');
  2.  var url = require('url');
  3.  
  4.  function serverStart(route,handle){
  5.          http.createServer(function(req,res){
  6.  
  7.              var pathname = url.parse(req.url).pathname;
  8.              console.log('http request for '+pathname+' recieved');
  9.  
  10.            route(route,handle,res,req);
  11.  
  12.          }).listen(3000,'127.0.0.1');
  13.  
  14.          console.log('http server start on port 3000');
  15.  }
  16.  
  17.  exports.serverStart = serverStart;

router.js:

  1.  function route(handle,pathname,response,request){
  2.    console.log('about to route a request for'+pathname);
  3.  
  4.      if(typeof handle[pathname] === 'function'){
  5.        return handle[pathname](response,request);
  6.      }
  7.      else{
  8.        console.log('no request handler found for'+pathname);
  9.        response.writeHead(404,{"Content-Type":"text/plain"});
  10.        response.write("404 not found!");
  11.        response.end();
  12.      }
  13.  }
  14.  
  15.  exports.route = route;

将上传和重命名的操作放在一起：

  1.  var querystring = require("querystring"),
  2.      fs = require("fs"),
  3.      formidable = require("formidable");
  4.  function start(response){
  5.    console.log("request handler 'start' was called");  
  6.  
  7.    var body = '<html>'+'<head>'+'<body>'+'<form action="/upload" method="post" enctype="multipart/form-data">'+
  8.          '<input type="file" name="upload"/><input type="submit" value="upload file">'+'</form></body></html>';
  9.  
  10.    response.writeHead(200,{"Content-Type":"text/html"});
  11.      response.write(body);
  12.      response.end();         
  13.  
  14.  }
  15.  
  16.  function upload(response,postData){
  17.    console.log("request handler 'upload' was called");
  18.  
  19.    var form = new formidable.IncomingForm();
  20.    form.parse(request,function(error,fields,files){
  21.      fs.renameSync(file.upload.path,"/tmp/test.png");
  22.      response.writeHead(200,{"Content-Type":"text/html"});
  23.        response.write("image:</br>");
  24.        response.write("<image src='/show'/>");
  25.        response.end();
  26.    });
  27.  
  28.  }
  29.  
  30.  function show(response,postData){
  31.    console.log("request handler 'show' was called");
  32.    fs.readFile("/tmp/test.png","binary",function(error,file){
  33.        if(error){
  34.             response.writeHead(500,{"Content-Type":"text/plain"});
  35.             response.write(error+"\n");
  36.               response.end();
  37.        }else{
  38.            response.writeHead(200,{"Content-Type":"image/png"});
  39.            response.write(file,"binary");
  40.            response.end();
  41.        }
  42.    });
  43.  }
  44.  
  45.  exports.start = start;
  46.  exports.upload = upload;
  47.  exports.show = show;

好，编译，重启浏览器。选择本地图片，上传并显示！

结构图如下：

该实例有关的技术点：

服务器端javascript

函数式编程

阻塞与非阻塞

单线程

回调

事件

nodejs模块

没有介绍到的还有数据库操作、单元测试、开发外部模块等。

注：本文摘抄自《nodejs入门》

nodeJs学习过程之一个图片上传显示的例子的更多相关文章

  1. ssm框架实现图片上传显示并保存地址到数据库

    本案例是通过springmvc+spring+mybatis框架以商品上传为例,实现的图片上传功能,并把图片的地址保存到数据库并在前台显示上传的图片. 本项目是使用maven搭建的项目,首先看下项目结 ...

  2. plupload简易应用 多图片上传显示预览以及删除

    <script> var uploader = new plupload.Uploader({ //实例化一个plupload上传对象 browse_button: 'btnBrowse' ...

  3. KindEditor 修改多图片上传显示限制大小和张数

    在使用KindEditor的时候用到多图片上传时,提示有最多上传20张图片,单张图片容量不超过1MB: 修改的文件的地方在:kindeditor\plugins\multiimage\multiima ...

  4. 一个伪ajax图片上传代码的例子

    一个伪ajax图片上传实现代码. 复制代码代码如下: <?php  if($_FILES){  ?>  <script>  window.parent.ajaxUploadPi ...

  5. [python][flask] Flask 图片上传与下载例子（支持漂亮的拖拽上传）

    目录 1.效果预览 2.新增逻辑概览 3.tuchuang.py 逻辑介绍 3.1 图片上传 3.2 图片合法检查 3.3 图片下载 4.__init__.py 逻辑介绍 5.upload.html ...

  6. 一个node.js图片上传显示小应用

    文件结构如下: 实现的功能有: 可以通过浏览器使用. 当请求http://domain/start时,可以看到一个欢迎页面,页面上有一个文件上传的表单. 用户可以选择一个图片并提交表单,随后文件将被上 ...

  7. Asp.net 2.0 无刷新图片上传 显示缩略图 具体实现

    简单三步实现图片无刷新上传:注意是上传,至于上传时的验证,比如图片的尺寸,大小,格式判断.限制等,自行解决. 兼容性想还不错:FF,CH,IE,猎豹,都是可以实现的.如果看到回显.当然就是成功了. 经 ...

  8. nodejs -formidable模块实现图片上传。

    var form = new formidable.IncomingForm(); form.uploadDir="/localnonobank/test/images/";   ...

  9. Nodejs之MEAN栈开发（四）---- form验证及图片上传

    这一节增加推荐图书的提交和删除功能,来学习node的form提交以及node的图片上传功能.开始之前需要源码同学可以先在git上fork:https://github.com/stoneniqiu/R ...

随机推荐

  1. 关于Unity中从服务器下载资源压缩包AssetBundle的步骤

    AssetBundle 1: 在Unity中,能为用户存储资源的一种压缩格式的打包集合,他可以存任意一种Unity引擎可以识别的资源: 模型,音频,纹理图,动画, 开发者自定义的二进制文件; 2: 这 ...

  2. python opencv 学习笔记

    图片缩放 image=cv2.imread('test.jpg')  res=cv2.resize(image,(32,32),interpolation=cv2.INTER_CUBIC)  cv2. ...

  3. VUE系列二：vue基础

    一.组件嵌套 1. 新建一个组件Users.vue <template> <div class="users"> <ul> <li v-f ...

  4. 转换基于Maven的Java项目支持Eclipse IDE

    在过去的教程中,使用 Maven 创建了一个Java项目,但是这个项目不能导入到Eclipse IDE中,因为它不是 Eclipse 风格的项目. 这里有一个指南,向您演示如何转换 Maven 生成 ...

  5. e775. 设置JList组件项的维数

    By default, the width of the list is determined by the longest item and the height is determined by ...

  6. python2除法保留小数部分

    转载:http://www.cnblogs.com/yhleng/p/9223944.html 1.python2和python3除法的最大区别: python2: print 500/1000 py ...

  7. 下拉刷新XListView的简单分析

    依照这篇博文里的思路分析和理解的 先要理解Scroller,看过的博文: http://ipjmc.iteye.com/blog/1615828 http://blog.csdn.net/wangji ...

  8. [转]Phantomjs实现获取网页快照并生成缩略图

    Shell脚本实现获取网页快照并生成缩略图 这篇文章主要介绍了Shell脚本实现获取网页快照并生成缩略图,本文获取网页快照使用phantomjs.生成缩略图使用ImageMagick,需要的朋友可以参 ...

  9. 1 最简单的hello world

    preface 今天我开始自学flask了,由此记录学习中的点点滴滴. 有问题请联系我(Mr.Leo 18500777133@sina.cn) include: 简介flask hello world ...

  10. 8 云计算系列之Horizon的安装与虚拟机创建流程

    preface 在上一章节中,我们可以在无web管理界面上创建并启动虚拟机,虽然可以这么做,但是敲命令太繁琐,所以此时我们可以安装openstack web管理界面,通过web界面的图形化操作open ...