express4 ajax,Node.js（Express4.x）的Ajax处理2——文件上传

0.目标

AJAX即“Asynchronous Javascript And XML*”(异步JavaScript和XML)，是指一种创建交互式应用的网页开发技术。

通过ajax方式上传文件可以避免刷新网页，本节将做一个简单的Demo来说明如何操作。

1.部署Express

如果不知道如何部署，可参照： 部署Express

另外，可以参考如何通过提交表单刷新网页的方式上传文件：文件上传

2.服务器端

这里要用到multer中间件，这个需要自行安装：

npm install multer --save

在routes/index.js中引用multer，另外， 因为需要用到文件系统，所以还要引用fs模块：

var multer = require('multer');

var fs = require("fs");

增加一个路由，用来显示页面：

/* 浏览器输入地址(如127.0.0.1:3000/upload)后，显示views/upload页面，此页面使用默认引擎(这里是jade)渲染 */

router.get('/upload', function(req, res, next) {

res.render('upload');

});

增加一个路由，用来处理上传操作：

var upload = multer({ dest: '/tmp/' })

router.post('/file_upload', upload.array('image'), function(req, res, next) {

console.log(req.files[0]); // 上传的文件信息

if(undefined == req.files[0]){

res.json(['failed', {msg:"没有选择要上传的文件！"}]);

return -1;

}

var des_file = "./files/" + req.files[0].originalname;

fs.readFile( req.files[0].path, function (err, data) {

fs.writeFile(des_file, data, function (err) {

if( err ){

console.log( err );

res.json(['failed', {msg:err}]);

}else{

response = {

msg:'File uploaded successfully',

filename:req.files[0].originalname,

};

console.log( response );

res.json(['success', response]);

}

});

});

});

注意

在根目录下创建一个文件夹，名称是files。如果没有先创建，上传文件时会报错。

3.客户端页面

3.1 添加js文件

在public/javascripts文件夹下，放入两个文件：

jquery.min.js // 自行下载jquery

upload.js // 空白文件，下面会给出代码

其中upload.js代码如下：

var OL_Action_Root = "http://127.0.0.1:3000";

function Req_ajax()

{

var formData = new FormData($("#imagelist")[0]);

$.ajax({

url: OL_Action_Root+'/file_upload',

type: 'POST',

data: formData,

cache: false,

contentType: false,

processData: false,

success: function(data){

var res = data;

if(res[0] == 'success')

{

document.getElementById("status").innerHTML = "文件上传成功！
文件名为："+res[1].filename+"";

}

else

{

document.getElementById("status").innerHTML = "文件上传失败！
原因是："+res[1].msg+"";

}

},

error: function(jqXHR, textStatus, errorThrown){

document.getElementById("status").innerHTML = "连接不到服务器，请检查网络！";

}

});

}

3.2 添加页面

在views文件夹下，添加一个文件upload.jade

doctype html

html

head

title= title

link(rel='stylesheet', href='/stylesheets/style.css')

body

h1 Express通过Ajax文件上传

h3 选择一个文件上传

form(enctype="multipart/form-data" method="post" )#imagelist

input(type="file" name="image")

input(type="button" value="上传文件" οnclick="Req_ajax()")

p#status

p#preview

script(src='/javascripts/jquery.min.js')

script(src='/javascripts/upload.js')

4.测试

运行服务，在浏览器里输入：

浏览器中选择一个文件上传：

选择上传文件

上传结果：

上传结果

文件

服务端打印：

服务端打印

原创文章，未经许可，请勿转载

作者：Mike的读书季

日期：2016.09.19

QQ：1139904786

Blog：http://blog.csdn.net/kkdestiny