文件结构如下：

实现的功能有：

  • 可以通过浏览器使用。
  • 当请求http://domain/start时，可以看到一个欢迎页面，页面上有一个文件上传的表单。
  • 用户可以选择一个图片并提交表单，随后文件将被上传到http://domain/upload，该页面完成上传后会把图片显示在页面上。

模块的功能：

  • HTTP服务器：提供Web页面 server.js
//请求（require）Node.js自带的 http 模块，并且把它赋值给 http 变量

var http = require("http");

var url = require("url");

function start(route, handle) {

  //将路由函数作为参数传递

  function onRequest(request, response) {

    var pathname = url.parse(request.url).pathname;

    //找出浏览器请求的URL路径

    console.log("Request for " + pathname + " received.");

    //在 onRequest （我们的回调函数）触发的地方，用 console.log 输出了一段文本

    route(handle, pathname, response, request);

  }

  http.createServer(onRequest).listen(8888);

  //调用http模块提供的函数： createServer

  //这个函数会返回一个对象，这个对象有一个叫做 listen 的方法，

  //这个方法有一个数值参数，指定这个HTTP服务器监听的端口号

  console.log("Server has started.");

  //在HTTP服务器开始工作之后，也输出一段文本

}

exports.start = start;
其中找出浏览器请求的URL路径：

  • 对于不同的请求，根据请求的URL，我们的服务器需要给予不同的响应，因此我们需要一个路由，用于把请求对应到请求处理程序（request handler） router.js
//编写路由

//将response对象（从服务器的回调函数onRequest()获取）

//通过请求路由传递给请求处理程序。 随后，处理程序就可以采用该对象上的函数来对请求作出响应

function route(handle, pathname, response, request) {

    //传递request对象

  console.log("About to route a request for " + pathname);

  if (typeof handle[pathname] === 'function') {

    handle[pathname](response, request);

    //首先检查给定的路径对应的请求处理程序是否存在，如果存在的话直接调用相应的函数

  } else {

    console.log("No request handler found for " + pathname);

    response.writeHead(404, {"Content-Type": "text/html"});

    response.write("404 Not found");

    response.end();

  }

}

exports.route = route;
  • 请求处理程序（request handler） requestHandler.js
var querystring = require("querystring"),

//只把POST数据中我们感兴趣的部分传递给请求路由和请求处理程序

    fs = require("fs"),

    //将文件读取到我们的服务器中，使用一个叫fs的模块

    formidable = require("formidable");
//需要运行 npm install formidable下载该模块

//该模块做的就是将通过HTTP POST请求提交的表单，在Node.js中可以被解析。

//我们要做的就是创建一个新的IncomingForm，它是对提交表单的抽象表示，

//之后，就可以用它解析request对象，获取表单中需要的数据字段

function start(response) {

  console.log("Request handler 'start' was called.");

  var body = '<html>'+

    '<head>'+

    '<meta http-equiv="Content-Type" content="text/html; '+

    'charset=UTF-8" />'+

    '</head>'+

    '<body>'+

    //在/start表单中添加一个文件上传元素

    '<form action="/upload" enctype="multipart/form-data" '+

    'method="post">'+

    '<input type="file" name="upload" multiple="multiple">'+

    '<input type="submit" value="Upload file" />'+

    '</form>'+

    '</body>'+

    '</html>';

    response.writeHead(200, {"Content-Type": "text/html"});

    //当收到请求时，使用 response.writeHead() 函数发送一个HTTP状态200和HTTP头的内容类型（content-type）

    response.write(body);

    response.end();

}

function upload(response, request) {

  console.log("Request handler 'upload' was called.");

  var form = new formidable.IncomingForm();

  console.log("about to parse");

  form.parse(request, function(error, fields, files) {

    console.log("parsing done");

    fs.renameSync(files.upload.path, "/tmp/test.png");

    //确保该文件保存成/tmp/test.png

    response.writeHead(200, {"Content-Type": "text/html"});

    response.write("received image:<br/>");

    response.write("<img src='/show' />");

    //将上传的图片内嵌到/uploadURL输出的HTML中

    response.end();

  });

}

function show(response) {

    //添加/showURL的请求处理程序，该处理程序直接硬编码将文件/tmp/test.png内容展示到浏览器中

  console.log("Request handler 'show' was called.");

  fs.readFile("/tmp/test.png", "binary", function(error, file) {

      //

    if(error) {

      response.writeHead(500, {"Content-Type": "text/plain"});

      response.write(error + "\n");

      response.end();

    } else {

      response.writeHead(200, {"Content-Type": "image/png"});

      response.write(file, "binary");

      response.end();

    }

  });

}

exports.start = start;

exports.upload = upload;

exports.show = show;
  • 入口 index.js
var server = require("./server");

var router = require("./router");

var requestHandlers = require("./requestHandlers");

//创建一个叫做requestHandlers的模块,请求处理函数

var handle = {}

handle["/"] = requestHandlers.start;

//在对象中添加一个键为"/"的属性，对应requestHandlers.start

//即可将不同的URL映射到相同的请求处理程序上

handle["/start"] = requestHandlers.start;

handle["/upload"] = requestHandlers.upload;

handle["/show"] = requestHandlers.show;

//路由函数可以被注入到服务器中

server.start(router.route, handle);

在命令行中运行 node index.js

效果：

点击选择文件 Upload file：

图片已经上传到服务端：

参考：http://www.nodebeginner.org/index-zh-cn.html

一个node.js图片上传显示小应用的更多相关文章

  1. node.js图片上传

    1.node-formidable 对文件上传提供帮助的组件 2.app.js var formidable = require('formidable'); var http = require( ...

  2. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

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

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

  4. 前端js图片上传

    前端js图片上传,原理用input type="file"获取图片然后把图片转换成base64编码传到后台. 图片上传 <!DOCTYPE html><html& ...

  5. Node.js 文件上传 cli tools

    Node.js 文件上传 cli tools byte stream 断点续传 refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!

  6. JS图片上传预览插件制作（兼容到IE6）

    其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...

  7. 微信JS图片上传与下载功能--微信JS系列文章（三）

    概述 在前面的文章微信JS初始化-- 微信JS系列文章(一)中已经介绍了微信JS初始化的相关工作,接下来本文继续就微信JS的图片上传功能进行描述,供大家参考. 图片上传 $(function(){ v ...

  8. js图片上传 的方法

    先规划出框架 <div id="AQA" style="width:300px; height:200px; background-color:aquamarine ...

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

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

随机推荐

  1. jQuery Pagination分页插件--无刷新

    源码:https://github.com/SeaLee02/FunctionModule/blob/master/UploadFiles/WebDemo/FenYE/FenYeAjax.aspx 代 ...

  2. 国产中标麒麟Linux部署dotnet core 环境并运行项目 （二） 部署运行控制台项目

    背景 在上一篇文章安装dotnet core,已经安装好dotnet core了.之前只是安装成功了dotnet, 输入dotnet --info,可以确认安装成功了,但是在运行代码时,还是报错了,本 ...

  3. java算法面试题：金额转换，阿拉伯数字的金额转换成中国传统的形式如：（￥1011）－>（一千零一拾一元整）输出。

    package com.swift; public class RenMingBi { private static final char[] data = new char[]{'零','壹','贰 ...

  4. SVG path

    在网页上画一图形,比如星星或波浪线,开始是想着图形软件画一个的,后来发现SVG这绘图程序的语言,感觉甚是可以,就发了些时间学了一下,在此做一简单分享和记录. 菜鸟上是这么介绍的(SVG 是使用 XML ...

  5. shell脚本中case的用法

    shell脚本中case选择语句可以结合read指令实现比较好的交互应答操作,case接收到read指令传入的一个或多个参数,然后case根据参数做选择操作. case的语法如下 case $char ...

  6. <%%>用法初步认识

    <%%>是用于向客户端插入服务器代码所使用的一种标记 例如为了在HTML页面上展示由服务器提供的当前用户的某条信息或名字等便可使用 前台 <a href="home.asp ...

  7. 第六篇：python中numpy.zeros(np.zeros)的使用方法

    用法:zeros(shape, dtype=float, order='C') 返回:返回来一个给定形状和类型的用0填充的数组: 参数:shape:形状 dtype:数据类型,可选参数,默认numpy ...

  8. The Apache Tomcat Servlet/JSP Container

    1.Tomcat部署的场景分析 通常,我们对tomcat单机部署需求可以分为几种: 单实例单应用 (一个tomcat 一个web应用) 单实例多应用 (一个tomcat多个应用) 多实例单应用 (多个 ...

  9. 菜鸟学Linux - Linux文件属性

    在Linux中,文件的属性是一个很重要的概念,用户或者用户组对一个文件所拥有的权限,都可以从文件的属性得知. 我们可以通过ls -al命令,列出某个文件夹下面的所有文件(包括以.开头的隐藏文件).下面 ...

  10. IOS开发---菜鸟学习之路--（十三）-利用MBProgressHUD进行异步获取数据

    本章将介绍如何利用MBProgressHUD实现异步处理数据. 其实我本来只是像实现一个加载数据时提示框的效果,然后问了学长知道了这个类,然后就使用了 接着就发现了一个“BUG” 再然后就发现原来MB ...