今天使用NodeJS配合Ajax，結(jié)合Node第三方模塊formidable上傳文件，具體步驟如下：

　　首先去Node官網(wǎng)下載NodeJS并且安裝：https://nodejs.org/en/

　　進(jìn)入終端之后直接輸入指令npm install formidable,安裝formidable模塊之后就可以開始開發(fā)了。

　　首先前端布局文件上傳界面，代碼如下：

　　緊接著使用NodeJS搭建后臺(tái)服務(wù)器并且引入需要的formidable模塊和前端請(qǐng)求發(fā)送的數(shù)據(jù)處理模塊

　　//創(chuàng)建服務(wù)器，完成前端文件數(shù)據(jù)的存儲(chǔ)
　　//引入formidable模塊
　　var formidable = require('formidable');
　　//引入文件操作模塊
　　var fs = require('fs');
　　//步驟1：引入http模塊
　　var http = require('http');
　　//步驟2:創(chuàng)建服務(wù)器
　　var server = http.createServer(function (req, res) {
　　});
　　//步驟3:設(shè)置監(jiān)聽的端口號(hào)
　　server.listen(8080);

　　同時(shí)在NodeJS文件中定義函數(shù)利用formidable完成form表單數(shù)據(jù)的解析，代碼如下：

　　//定義函數(shù)完成文件的上傳
　　function load_file(req, res) {
　　//創(chuàng)建form表單數(shù)據(jù)的解析對(duì)象
　　var form = new formidable.IncomingForm();
　　//設(shè)置文件上傳之后在服務(wù)器端存儲(chǔ)的路徑
　　form.uploadDir = "./img";
　　//設(shè)置文件上傳之后是否保存文件后綴，默認(rèn)是不保存
　　form.keepExtensions = true;
　　// form.maxFieldSize = 2*1024*1024;
　　//開始文件上傳
　　form.parse(req, function (error, fields, files) {
　　if(error) {
　　var message = {err:1, msg:"文件解析失敗"};
　　}
　　var message = {err:0, path:"http://localhost:8080/"+files.file.path};
　　//向前端返回json數(shù)據(jù)
　　res.write(JSON.stringify(message));
　　res.end();
　　});
　　}

　　此時(shí)在創(chuàng)建服務(wù)器

　　var server = http.createServer(function (req, res) {
　　});

　　對(duì)應(yīng)的回調(diào)函數(shù)中執(zhí)行下面一段代碼：

　　//req:request，客戶端向服務(wù)器發(fā)送的請(qǐng)求
　　//res:response，服務(wù)器向客戶端所做的回應(yīng)
　　res.writeHead(200, {"Content-type":"text/json;charset=utf-8", 
"Access-Control-Allow-Origin":"http://localhost:63342"});
　　if(req.method == "POST") {
　　//說(shuō)明本次請(qǐng)求是用來(lái)進(jìn)行文件上傳
　　load_file(req, res);
　　}else {
　　//說(shuō)明本次請(qǐng)求是為了向前端返回圖片數(shù)據(jù)
　　var path = "."+req.url;
　　//創(chuàng)建一個(gè)讀取流
　　var readStream = fs.createReadStream(path);
　　//管道流
　　readStream.pipe(res);
　　}

　　最后在前端引入jQuery文件之后，書寫Ajax請(qǐng)求完成form表單數(shù)據(jù)的上傳

　　最終實(shí)現(xiàn)的效果：

其他相關(guān)課程推薦

　　Javascript DOM