0.目標(biāo)
AJAX即“Asynchronous Javascript And XML*”（異步JavaScript和XML）过蹂，是指一種創(chuàng)建交互式應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。
通過ajax方式上傳文件可以避免刷新網(wǎng)頁歪赢，本節(jié)將做一個(gè)簡單的Demo來說明如何操作。
1.部署Express
如果不知道如何部署单料，可參照： 部署Express
另外埋凯，可以參考如何通過提交表單刷新網(wǎng)頁的方式上傳文件：文件上傳
2.服務(wù)器端
這里要用到multer中間件，這個(gè)需要自行安裝：
npm install multer --save
在routes/index.js中引用multer扫尖，另外白对， 因?yàn)樾枰玫轿募到y(tǒng)，所以還要引用fs模塊：
var multer = require('multer');
var fs = require("fs");
增加一個(gè)路由换怖，用來顯示頁面：
/* 瀏覽器輸入地址（如127.0.0.1:3000/upload）后甩恼，顯示views/upload頁面，此頁面使用默認(rèn)引擎（這里是jade）渲染 */
router.get('/upload', function(req, res, next) {
res.render('upload');
});
增加一個(gè)路由沉颂，用來處理上傳操作：
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]);
}
});
});
});
注意
在根目錄下創(chuàng)建一個(gè)文件夾，名稱是files铸屉。如果沒有先創(chuàng)建钉蒲，上傳文件時(shí)會報(bào)錯(cuò)。
3.客戶端頁面
3.1 添加js文件
在public/javascripts文件夾下彻坛，放入兩個(gè)文件：
- 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 = "<span style='color:green'>文件上傳成功帆赢！<br>文件名為："+res[1].filename+"</span>";
}
else
{
document.getElementById("status").innerHTML = "<span style='color:#EF0000'>文件上傳失敗线梗！<br>原因是："+res[1].msg+"</span>";
}
},
error: function(jqXHR, textStatus, errorThrown){
document.getElementById("status").innerHTML = "<span style='color:#EF0000'>連接不到服務(wù)器椰于，請檢查網(wǎng)絡(luò)！</span>";
}
});
}
3.2 添加頁面
在views文件夾下仪搔，添加一個(gè)文件upload.jade
doctype html
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
h1 Express通過Ajax文件上傳
h3 選擇一個(gè)文件上傳
form(enctype="multipart/form-data" method="post" )#imagelist
input(type="file" name="image")
input(type="button" value="上傳文件" onclick="Req_ajax()")
p#status
p#preview
script(src='/javascripts/jquery.min.js')
script(src='/javascripts/upload.js')
4.測試
運(yùn)行服務(wù)瘾婿，在瀏覽器里輸入：
瀏覽器中選擇一個(gè)文件上傳：
選擇上傳文件
上傳結(jié)果：
上傳結(jié)果
文件
服務(wù)端打印：
服務(wù)端打印
原創(chuàng)文章烤咧，未經(jīng)許可偏陪，請勿轉(zhuǎn)載
作者：Mike的讀書季
日期：2016.09.19
QQ：1139904786
Blog：http://blog.csdn.net/kkdestiny
