node.js实现多图片上传实例


Posted in Javascript onJune 03, 2014

先上效果图:

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") {
        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 class="upload_item" index="1"><span class="upload_item_add" onclick="ADD.upload_click(this)">+</span><input type="file" name="pics" id="pics" class="upload_input" 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 class="upload_item" index="0" style="display:none;"><span class="upload_item_add" onclick="ADD.upload_click(this)">+</span><input type="file" name="pics" id="pics" class="upload_input" onchange="ADD.upload_change(this)" /></div><div class="upload_item" index="1"><span class="upload_item_add" onclick="ADD.upload_click(this)">+</span><input type="file" name="pics" id="pics" class="upload_input" 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 相关文章推荐
收集的10个免费的jQuery相册
Feb 26 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
Oct 18 Javascript
用jquery仿做发微博功能示例
Apr 18 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
Sep 03 Javascript
JavaScript学习笔记之取数组中最大值和最小值
Mar 23 Javascript
Vue学习笔记进阶篇之过渡状态详解
Jul 14 Javascript
JS实现的JSON序列化操作简单示例
Jul 02 Javascript
vue组件中的样式属性scoped实例详解
Oct 30 Javascript
vue component 中引入less文件报错 Module build failed
Apr 17 Javascript
基于vue手写tree插件的那点事儿
Aug 20 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
Sep 24 Javascript
uni-app 自定义底部导航栏的实现
Dec 11 Javascript
node.js正则表达式获取网页中所有链接的代码实例
Jun 03 #Javascript
jquery处理json数据实例分析
Jun 03 #Javascript
js 获取浏览器版本以此来调整CSS的样式
Jun 03 #Javascript
jQuery绑定事件不执行但alert后可以正常执行
Jun 03 #Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
Jun 03 #Javascript
jQuery多项选项卡的实现思路附样式及代码
Jun 03 #Javascript
jquery动态改变form属性提交表单
Jun 03 #Javascript
You might like
php include和require的区别深入解析
2013/06/17 PHP
基于Jquery的将DropDownlist的选中值赋给label的实现代码
2011/05/06 Javascript
imgAreaSelect 中文文档帮助说明
2011/10/08 Javascript
JavaScript mapreduce工作原理简析
2012/11/25 Javascript
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
JavaScript中创建类/对象的几种方法总结
2013/11/29 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
2015/03/24 Javascript
初探JavaScript 面向对象(推荐)
2017/09/03 Javascript
Chrome调试折腾记之JS断点调试技巧
2017/09/11 Javascript
nginx配置React静态页面的方法教程
2017/11/03 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
2019/01/08 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
2019/05/31 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
2019/06/25 Javascript
基于layui的下拉列表的数据回显方法
2019/09/24 Javascript
原生jQuery实现只显示年份下拉框
2020/12/24 jQuery
[01:48:04]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第一场 2月7日
2021/03/11 DOTA
python几种常用功能实现代码实例
2019/12/25 Python
使用Python来做一个屏幕录制工具的操作代码
2020/01/18 Python
用Python绘制漫步图实例讲解
2020/02/26 Python
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
2018/05/25 HTML / CSS
澳大利亚吉他在线:Artist Guitars
2017/03/30 全球购物
Marc Jacobs官方网站:美国奢侈品牌
2017/08/29 全球购物
VisionPros美国站:加拿大在线隐形眼镜和眼镜零售商
2020/02/11 全球购物
如何用Python来进行查询和替换一个文本字符串
2014/01/02 面试题
公司联欢晚会主持词
2014/03/22 职场文书
假面舞会策划方案
2014/05/29 职场文书
代领报检证委托书范本
2014/10/11 职场文书
整改落实自查报告
2014/11/05 职场文书
小学教师师德师风自我评价
2015/03/04 职场文书
《吃水不忘挖井人》教学反思
2016/02/22 职场文书
街道办残联2016年助残日活动总结
2016/04/01 职场文书
职场:企业印章管理制度(模板)
2019/10/18 职场文书
用php如何解决大文件分片上传问题
2021/07/07 PHP
关于python类SortedList详解
2021/09/04 Python
直播实况, OMG破敌三路五十分钟大战神技局摩托车
2022/04/01 DOTA