node.js实现多图片上传实例_Javascript教程-查字典教程网
node.js实现多图片上传实例
node.js实现多图片上传实例
发布时间:2017-01-14 来源:查字典编辑
摘要:先上效果图:这是我当时做多图片的代码,拿出来给大家借鉴一下(有些地方需要亲们自己改一下,大方向是对的)总共涉及到三处文件(常规来说)1.路由...

先上效果图:

这是我当时做多图片的代码,拿出来给大家借鉴一下(有些地方需要亲们自己改一下,大方向是对的)

总共涉及到三处文件(常规来说)

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 Settingshud桌面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>+</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"><span>+</span><input type="file" name="pics" id="pics" onchange="ADD.upload_change(this)" /></div><div index="1"><span>+</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>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类