node.js实现多图片上传实例
先上效果图:
这是我当时做多图片的代码,拿出来给大家借鉴一下(有些地方需要亲们自己改一下,大方向是对的)
总共涉及到三处文件(常规来说)
1.路由入口文件(我这里是/routes.js,很多时候会在/app.js)
//添加美食
app.all("/add",users.add);
2.路由控制器文件(我这里是/routes/users.js)
//添加美食
exports.add=function(req,res){
if(req.method=="GET"){
varuser={};
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"){
//获取数据
varx=req.body.x;
vary=req.body.y;
varcat_id=req.body.cat_id;
varcat_name=req.body.cat_name;
varaddress=req.body.address;
vartitle=req.body.title;
vardesc=req.body.desc;
varcontent=req.body.content;
varpics="";
varprice=req.body.price;
vartags=req.body.tags;
varadd_time=Date.parse(newDate())/1000;
varsupport=0;
varuid=req.body.uid;
//处理图片上传
//console.dir(req.files);
varfile_obj=req.files.pics;
//console.log(file_obj.length);
varfile_obj2=[];
for(vari=0;i<file_obj.length;i++){
if(file_obj[i].name){
file_obj2.push(file_obj[i]);
}
}
varlength=file_obj2.length;
if(length>0){
file_obj2.forEach(function(item,index){
if(item.path){
vartmpPath=item.path;
vartype=item.type;
varextension_name="";
//移动到指定的目录,一般放到public的images文件下面
//在移动的时候确定路径已经存在,否则会报错
vartmp_name=(Date.parse(newDate())/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;
}
vartmp_name=tmp_name+"."+extension_name;
vartargetPath="public/images/"+tmp_name;
console.log(tmpPath);
//将上传的临时文件移动到指定的目录下
fs.rename(tmpPath,targetPath,function(err){
if(err){
throwerr;
}
if(pics){
pics+=","+tmp_name;
}else{
pics+=tmp_name;
}
//判断是否完成
//console.log(index);
//删除临时文件
fs.unlink(tmpPath,function(){
if(err){
throwerr;
}else{
if((index+1)==length){
console.log(targetPath);
//上传处理完成
//数据
vardata={
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{
//没有图片
//数据
vardata={
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:2pxdashed#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>
varADD={
upload_click:function(obj){
$(obj).parent().children().eq(1).click();
},
upload_change:function(obj){
varpath;
path=$(obj).val(); //C:\DocumentsandSettings\hud\桌面\AddFile.jpg
varaa;
aa=path.split(".");
//alert(aa[aa.length-1]); //jpg结果
varname;
name=path.split("\\");
varbb=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){//新增
varhtml="<divclass="upload_item"index="1"><spanclass="upload_item_add"onclick="ADD.upload_click(this)">+</span><inputtype="file"name="pics"id="pics"class="upload_input"onchange="ADD.upload_change(this)"/></div>";
$("#upload_box").append(html);
$(obj).parent().attr("index","0");
}
}
};
</script>
<formmethod="post"action="/add"enctype="multipart/form-data">
<table>
<tr>
<td>经度:</td><td><inputtype="text"name="x"id="x"/></td>
</tr>
<tr>
<td>维度:</td><td><inputtype="text"name="y"id="y"/></td>
</tr>
<tr>
<td>分类:</td><td><selectname="cat_id"><optionvalue="1">分类1</option></select></td>
</tr>
<tr>
<td>地址:</td><td><inputtype="text"name="address"id="address"/></td>
</tr>
<tr>
<td>标题:</td><td><inputtype="text"name="title"id="title"/></td>
</tr>
<tr>
<td>简介:</td><td><inputtype="text"name="desc"id="desc"/></td>
</tr>
<tr>
<td>内容:</td><td><inputtype="text"name="content"id="content"/></td>
</tr>
<tr>
<td>图片:</td><tdid="upload_box"><divclass="upload_item"index="0"style="display:none;"><spanclass="upload_item_add"onclick="ADD.upload_click(this)">+</span><inputtype="file"name="pics"id="pics"class="upload_input"onchange="ADD.upload_change(this)"/></div><divclass="upload_item"index="1"><spanclass="upload_item_add"onclick="ADD.upload_click(this)">+</span><inputtype="file"name="pics"id="pics"class="upload_input"onchange="ADD.upload_change(this)"/></div></td>
</tr>
<tr>
<td>价格:</td><td><inputtype="text"name="price"id="price"/></td>
</tr>
<tr>
<td>标签:</td><td><inputtype="text"name="tags"id="tags"/></td>
</tr>
<tr>
<tdcolspan="2"><inputtype="submit"value="提交"/></td>
</tr>
</table>
</form>
相关文章
- js垃圾处理机制_java中垃圾回收有什么目的
- 花上百万元用three.js开发的元宇宙空间,在线大型车展参考案例
- 利用 JS 实现 Redis 的连接(js连接redis)
- 仿客齐集首页导航条DIV+CSS+JS[代码实例]
- 最佳JS代码编写的14条技巧
- js控制滚动条缓慢滚动到顶部实现代码
- js事件冒泡实例分享(已测试)
- js写一个字符串转成驼峰的实例
- js综合应用实例简单的表格统计
- C#Js时间格式化问题简单实例
- JS常用正则表达式总结
- JS实现遮罩层效果的简单实例
- js获取客户端外网ip的简单实例
- js截取固定长度的中英文字符的简单实例
- js获取url参数代码实例分享(JS操作URL)
- js键盘上下左右键怎么触发function(实例讲解)
- js获取指定的cookie的具体实现
- js读取被点击次数的简单实例(从数据库中读取)
- JS图片无缝、平滑滚动代码
- js操作输入框提示信息且响应鼠标事件
- js的Prototype属性解释及常用方法
- JS中FRAME的操作问题实例分析
- js读写json文件实例代码
- js实现ArrayList功能附实例代码
- js使用removeChild方法动态删除div元素
- JS简单计算器实例