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 相关文章推荐
js实现的网站首页随机公告随机公告
Mar 14 Javascript
IE6,IE7下js动态加载图片不显示错误
Jul 17 Javascript
js下通过prototype扩展实现indexOf的代码
Dec 08 Javascript
jQuery代码优化 遍历篇
Nov 01 Javascript
自己写了一个展开和收起的多更能型的js效果
Mar 05 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
Apr 26 Javascript
Javascript 绘制 sin 曲线过程附图
Aug 21 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
Sep 18 Javascript
一波JavaScript日期判断脚本分享
Mar 06 Javascript
微信小程序中使用javascript 回调函数
May 11 Javascript
ionic环境配置及问题详解
Jun 27 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 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数据库抽象层 PDO
2011/05/07 PHP
深入解析php中的foreach函数
2013/08/31 PHP
Laravel 5 框架入门(二)构建 Pages 的管理功能
2015/04/09 PHP
PHP编写daemon process 实例详解
2016/11/13 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
2019/10/11 PHP
面向对象的Javascript之三(封装和信息隐藏)
2012/01/27 Javascript
用javascript添加控件自定义属性解析
2013/11/25 Javascript
javascript和jquery修改a标签的href属性
2013/12/16 Javascript
javascript中expression的用法整理
2014/05/13 Javascript
使用jquery提交form表单并自定义action的实现代码
2016/05/25 Javascript
jQuery窗口拖动功能的实现代码
2017/02/04 Javascript
jQuery事件详解
2017/02/23 Javascript
Angular CLI 安装和使用教程
2017/09/13 Javascript
详解Vue之父子组件传值
2019/04/01 Javascript
vue flex 布局实现div均分自动换行的示例代码
2020/08/05 Javascript
查找Vue中下标的操作(some和findindex)
2020/08/12 Javascript
Python实现计算两个时间之间相差天数的方法
2017/05/10 Python
python基础教程项目四之新闻聚合
2018/04/02 Python
Python实现压缩文件夹与解压缩zip文件的方法
2018/09/01 Python
学生信息管理系统Python面向对象版
2019/01/30 Python
Python测试模块doctest使用解析
2019/08/10 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
PyCharm下载和安装详细步骤
2019/12/17 Python
英国最大的女性服装零售商:Dorothy Perkins
2017/03/30 全球购物
英国女士家居服网站:hush
2017/08/09 全球购物
PHP如何防止SQL注入
2014/05/03 面试题
美德少年事迹材料
2014/01/23 职场文书
培训主管岗位职责
2014/02/01 职场文书
查摆问题整改措施
2014/10/24 职场文书
优秀党支部申报材料
2014/12/24 职场文书
小学语文教师年度考核个人总结
2015/02/05 职场文书
中标通知书
2015/04/17 职场文书
小学毕业感言100字
2015/07/30 职场文书
2015年秋季运动会广播稿
2015/08/19 职场文书
2016年母亲节广告语
2016/01/28 职场文书
Redis遍历所有key的两个命令(KEYS 和 SCAN)
2021/04/12 Redis