先上效果圖：
這是我當時做多圖片的代碼，拿出來給大家借鑒一下（有些地方需要親們自己改一下，大方向是對的）
總共涉及到三處文件（常規來說）
1.路由入口文件(我這裡是/routes.js,很多時候會在/app.js)
複製代碼代碼如下:
//添加美食
app.all('/add', users.add);
2.路由控制器文件（我這裡是/routes/users.js）
複製代碼代碼如下:
//添加美食
exports.add = function (req, res) {
if (req.method == "GET") {
var user = {};
if(req.session.user){
user = req.session.user;
}
res.render("users/food_add", {title:'發布美食-'+config.name,name:config.name,user:user});
} else if (req.method == "POST") {
//獲取數據
var x = req.body.x;
var y = req.body.y;
var cat_id = req.body.cat_id;
var cat_name = req.body.cat_name;
var address = req.body.address;
var title = req.body.title;
var desc = req.body.desc;
var content = req.body.content;
var pics = '';
var price = req.body.price;
var tags = req.body.tags;
var add_time = Date.parse(new Date())/1000;
var support = 0;
var uid = req.body.uid;
//處理圖片上傳
//console.dir(req.files);
var file_obj = req.files.pics;
//console.log(file_obj.length);
var file_obj2 = [];
for(var i=0;i<file_obj.length;i++){
if(file_obj[i].name){
file_obj2.push(file_obj[i]);
}
}
var length = file_obj2.length;
if(length>0){
file_obj2.forEach(function(item,index){
if(item.path){
var tmpPath = item.path;
var type = item.type;
var extension_name = "";
//移動到指定的目錄，一般放到public的images文件下面
//在移動的時候確定路徑已經存在，否則會報錯
var tmp_name = (Date.parse(new Date())/1000);
tmp_name = tmp_name+''+(Math.round(Math.random()*9999));
//判斷文件類型
switch (type) {
case 'image/pjpeg':extension_name = 'jpg';
break;
case 'image/jpeg':extension_name = 'jpg';
break;
case 'image/gif':extension_name = 'gif';
break;
case 'image/png':extension_name = 'png';
break;
case 'image/x-png':extension_name = 'png';
break;
case 'image/bmp':extension_name = 'bmp';
break;
}
var tmp_name = tmp_name+'.'+extension_name;
var targetPath = 'public/images/' + tmp_name;
console.log(tmpPath);
//將上傳的臨時文件移動到指定的目錄下
fs.rename(tmpPath, targetPath , function(err) {
if(err){
throw err;
}
if(pics){
pics += ','+tmp_name;
}else{
pics += tmp_name;
}
//判斷是否完成
//console.log(index);
//刪除臨時文件
fs.unlink(tmpPath, function(){
if(err) {
throw err;
}else{
if((index+1)==length){
console.log(targetPath);
//上傳處理完成
//數據
var data = {
x:x,//經度
y:y,//維度
cat_id:cat_id,//分類id
cat_name:cat_name,//分類名稱
address:address,//地址
title:title,//標題
desc:desc,//簡介
content:content,//內容
pics:pics,//圖片字段，以','隔開多張圖片
price:price,//價格
tags:tags,//標籤以','隔開多個
add_time:add_time,//支持度
support:support,//支持度默認為0
uid:uid//用戶id 可匿名
};
food_preDao.insert(data, function (err, food) {
if(err){
res.json({err:100,content:'數據庫錯誤'});
}else{
res.json({err:0,content:'發布成功！',data:food});
}
});
}
}
});
});
}
});
}else{
//沒有圖片
//數據
var data = {
x:x,//經度
y:y,//維度
cat_id:cat_id,//分類id
cat_name:cat_name,//分類名稱
address:address,//地址
title:title,//標題
desc:desc,//簡介
content:content,//內容
pics:pics,//圖片字段，以','隔開多張圖片
price:price,//價格
tags:tags,//標籤以','隔開多個
add_time:add_time,//支持度
support:support,//支持度默認為0
uid:uid//用戶id 可匿名
};
food_preDao.insert(data, function (err, food) {
if(err){
res.json({err:100,content:'數據庫錯誤'});
}else{
res.json({err:0,content:'發布成功！',data:food});
}
});
}
}
};
3.視圖文件（我這裡是/views/users/food_add.ejs）
複製代碼代碼如下:
<style>
.upload_item{ width: 50px; height: 45px; overflow: hidden;border: 2px dashed #bfbfbf; float: left;margin-right: 10px;}
.upload_item_add{ width: 50px; height: 45px; display: block; line-height: 42px; text-align: center; font-size: 30px; cursor: pointer;}
.upload_input{ }
</style>
<script>
var ADD = {
upload_click:function(obj){
$(obj).parent().children().eq(1).click();
},
upload_change:function(obj){
var path;
path=$(obj).val(); //C:/Documents and Settings/hud/桌面/AddFile.jpg
var aa;
aa=path.split('.');
//alert(aa[aa.length-1]); //jpg 結果
var name;
name=path.split('//');
var bb=name[name.length-1];
//alert(bb.substr(0,bb.indexOf('.'))); //AddFile 結果
$(obj).parent().children().eq(0).css('fontSize','12px');
$(obj).parent().css('borderStyle','solid');
$(obj).parent().children().eq(0).html(bb.substr(0,bb.indexOf('.')));
if($(obj).parent().attr('index')==1){//新增
var html = '<div index="1"><span onclick="ADD.upload_click(this)">+</span><input type="file" name="pics" id="pics" onchange="ADD.upload_change(this)" /></div>';
$('#upload_box').append(html);
$(obj).parent().attr('index','0');
}
}
};
</script>
<form method="post" action="/add" enctype="multipart/form-data">
<table>
<tr>
<td>經度：</td><td><input type="text" name="x" id="x" /></td>
</tr>
<tr>
<td>維度：</td><td><input type="text" name="y" id="y" /></td>
</tr>
<tr>
<td>分類：</td><td><select name="cat_id"><option value="1">分類1</option></select></td>
</tr>
<tr>
<td>地址：</td><td><input type="text" name="address" id="address" /></td>
</tr>
<tr>
<td>標題：</td><td><input type="text" name="title" id="title" /></td>
</tr>
<tr>
<td>簡介：</td><td><input type="text" name="desc" id="desc" /></td>
</tr>
<tr>
<td>內容：</td><td><input type="text" name="content" id="content" /></td>
</tr>
<tr>
<td>圖片：</td><td id="upload_box"><div index="0" style="display:none;"><span onclick="ADD.upload_click(this)">+</span><input type="file" name="pics" id="pics" onchange="ADD.upload_change(this)" /></div><div index="1"><span onclick="ADD.upload_click(this)">+</span><input type="file" name="pics" id="pics" onchange="ADD.upload_change(this)" /></div></td>
</tr>
<tr>
<td>價格：</td><td><input type="text" name="price" id="price" /></td>
</tr>
<tr>
<td>標籤：</td><td><input type="text" name="tags" id="tags" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="提交" /></td>
</tr>
</table>
</form>