在此之前先大概了解下Node.js(服务端的javascript):
Node.js事实上是另外一种上下文，它允许在后端（脱离浏览器环境）运行JavaScript代码。
要实现在后台运行JavaScript代码，代码需要先被解释然后正确的执行。Node.js的原理正是如此，它使用了Google的V8虚拟机 （Google的Chrome浏览器使用的JavaScript执行环境），来解释和执行JavaScript代码。
除此之外，伴随着Node.js的还有许多有用的模块，它们可以简化很多重复的劳作，比如向终端输出字符串。
因此，Node.js事实上既是一个运行时环境，同时又是一个库。
要使用Node.js,首先需要进行安装。关于如何安装Node.js，可以直接进入官方网址https://nodejs.org/en/
我们的Web应用要求可以分文一下三点：
- 用户可以通过浏览器使用我们的应用。
- 当用户请求http://domain/start时，可以看到一个欢迎页面，页面上有一个文件上传的表单。
- 用户可以选择一个图片并提交表单，随后文件将被上传到http://domain/upload，该页面完成上传后会把图片显示在页面上。
接下来就开始动手，先用记事本创建一个server.js文件，用于构建一个简单的http服务器，代码如下：
//创建一个http模块
var http = require("http");
//创建一个url模块
var url = require("url");
function start(route,handle){
function onRequest(request, response){
var postData = "";
var pathname = url.parse(request.url).pathname;
console.log(typeof handle[pathname]);
console.log("Request for "+pathname+" received.");
route(handle, pathname, response, request);
}
http.createServer(onRequest).listen(8888);
console.log("Server has started");
}
//导出server模块
exports.start = start;
创建一个请求“路由”文件router.js,方便把服务端的对象参数传递给事件处理程序，就是待会要创建的新文件，代码如下：
function route(handle, pathname, response, request){
console.log("About to route a request for "+ pathname);
if(typeof handle[pathname]==='function'){
return handle[pathname](response, request);
}else{
console.log("No request handler found for "+ pathname);
response.writeHead(404,{"Content-Type":"text/plain"});
response.write("404 Not found");
}
}
exports.route = route;
接下来创建requestHanders.js文件，对事件进行处理，代码如下：
var querystring = require("querystring"),
fs = require("fs"),
formidable = require("formidable");
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>' +
'<form action="/upload" enctype="multipart/form-data" '+' method="post">' +
'<input type="file" name="upload" multiple="multiple" style="margin:100px auto 0;border:1px solid #ccc;border-radius:4px;display:block;" />'+
'<input type="submit" value="Upload file" style="width:200px;height:30px;border-radius:4px;border:1px solid #ccc;margin:40px auto;background-color:#109059;display:block;"/>' +
'</form>' +
'</body>' +
'</html>';
response.writeHead(200,{"Content-Type":"text/html"});
response.write(body);
response.end();
}
function upload(response, request){
console.log("Request handler 'upload' was called.");
var form = new formidable.IncomingForm();
form.uploadDir = 'tmp';
console.log("about to parse");
form.parse(request,function(error, fields, files){
if(error){throw error;}
console.log("parsing done");
fs.renameSync(files.upload.path, "/tmp/test.png");
response.writeHead(200,{"Content-Type":"text/html"});
response.write("received image:<br/>");
response.write("<img src='/show' />");
response.end();
});
}
function show(response, postData){
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");
var handle = {};
handle["/"] = requestHandlers.start;
handle["/start"] = requestHandlers.start;
handle["/upload"] = requestHandlers.upload;
handle["/show"] = requestHandlers.show;
server.start(router.route,handle);
然后在命令行启动服务器输入命令node index.js（记住必须切换到文件目录下运行文件）
浏览器呈现的效果图：
点击浏览选择./tmp/test.png图片进行测试，图片的路径一定要是与四个js文件在同一个目录下，然后点击上传后，如下图所示：
一个基础的web应用到此就完成了，具体参考node初学者入门，网址：http://ourjs.com/detail/529ca5950cb6498814000005