一个node.js图片上传显示小应用
文件结构如下：
实现的功能有：
- 可以通过浏览器使用。
- 当请求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图片上传显示小应用的更多相关文章
- node.js图片上传
1.node-formidable 对文件上传提供帮助的组件 2.app.js var formidable = require('formidable'); var http = require( ...
- 兼容好的JS图片上传预览代码
转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...
- 一个伪ajax图片上传代码的例子
一个伪ajax图片上传实现代码. 复制代码代码如下: <?php if($_FILES){ ?> <script> window.parent.ajaxUploadPi ...
- 前端js图片上传
前端js图片上传,原理用input type="file"获取图片然后把图片转换成base64编码传到后台. 图片上传 <!DOCTYPE html><html& ...
- Node.js 文件上传 cli tools
Node.js 文件上传 cli tools byte stream 断点续传 refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
- JS图片上传预览插件制作（兼容到IE6）
其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...
- 微信JS图片上传与下载功能--微信JS系列文章（三）
概述 在前面的文章微信JS初始化-- 微信JS系列文章(一)中已经介绍了微信JS初始化的相关工作,接下来本文继续就微信JS的图片上传功能进行描述,供大家参考. 图片上传 $(function(){ v ...
- js图片上传 的方法
先规划出框架 <div id="AQA" style="width:300px; height:200px; background-color:aquamarine ...
- plupload简易应用 多图片上传显示预览以及删除
<script> var uploader = new plupload.Uploader({ //实例化一个plupload上传对象 browse_button: 'btnBrowse' ...
随机推荐
- Solr7部署报错：java.lang.NoSuchMethodError: javax.servlet.ServletInputStream.isFinished()Z
错误信息: Servlet.service() for servlet [default] in context with path [/solr] threw exception [Filter e ...
- c++引用与指针的区别
c++引用与指针的区别 ★ 相同点: 1. 都是地址的概念: 指针指向一块内存,它的内容是所指内存的地址:引用是某块内存的别名. 指针的权威定义: In a declaration T D where ...
- 正则表达式通用匹配ip地址及主机检测
在使用正则表达式匹配ip地址时如果不限定ip正确格式,一些场景下可能会产生不一样的结果,比如ip数值超范围,ip段超范围等,在使用正则表达式匹配ip地址时要注意几点: 1,字符界定:使用 \< ...
- 作业hashlib题目
'''1.编写用户认证功能,要求如下 1.1.对用户密码加盐处理 1.2.用户名与密文密码存成字典,是以json格式存到文件中的 1.3.要求密用户输入明文密码,但程序中验证的是密文'''import ...
- python3.7 sys模块
#!/usr/bin/env python __author__ = "lrtao2010" #python3.7 sys模块 #sys模块负责程序与python解释器的交互,提供 ...
- __setitem__,__getitem,__delitem__的作用
class Foo: def __init__(self, name): self.name = name def __getitem__(self, item): print('obj[key]时, ...
- iOS SDK中使用NSXMLParser解析XML(iphone网络篇三)
iOS SDK的NSXMLParser解析XML文档是事件驱动模式的,即采用SAX方式来解析XML格式文档.NSXMLParser在处理XML文档的过程中当遇到一些要素(元素.属性.CDATA块.评论 ...
- HDU - 6514 Monitor（二维差分）
题意 给定一个\(n×m\)的矩阵.(\(n×m <= 1e7\)). \(p\)次操作,每次可以在这个矩阵中覆盖一个矩形. \(q\)次询问,每次问一个矩形区域中,是否所有的点都被覆盖. 解析 ...
- 12，scrapy框架之post请求
今日概要 递归爬取解析多页页面数据 scrapy的post请求发送 1.递归爬取解析多页页面数据 - 需求:将糗事百科所有页码的作者和段子内容数据进行爬取切持久化存储 - 需求分析:每一个页面对应一个 ...
- 2019腾讯暑期实习面试(offer)前端
最近在忙着准备找实习,所以没有更新之前的文章. 不过所幸功夫不负有心人,我拿到了腾讯的offer. 这里分享一下面试的经验. 简介 本人双非本科,普通学生一枚. 面的是腾讯的Web前端开发. 整个面试 ...