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

更新时间：2014年06月03日 10:40:29 作者：

这篇文章主要介绍了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);

                    });
                }
                    }
                });

            });
            }
         });
    }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）

复制代码代码如下:

            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>

您可能感兴趣的文章:

从零开始学习Node.js系列教程四：多页面实现数学运算的client端和server端示例
这篇文章主要介绍了Node.js多页面实现数学运算的client端和server端,结合具体实例形式分析了nodejs客户端提交与服务端处理实现数学运算的相关操作技巧,需要的朋友可以参考下
2017-04-04
Node.js如何提取文件中的中文字符
这篇文章主要介绍了Node.js如何提取文件中的中文字符，本文介绍了在Node.js开发中如何使用代码提取文件中的中文字符，帮助开发者更好地处理中文文本数据，提高开发效率
2023-05-05
nodejs版本过高导致vue-cli项目无法正常运行的几种解决方案
这篇文章主要给大家介绍了关于nodejs版本过高导致vue-cli项目无法正常运行的几种解决方案,在项目中你可能需要用到的node版本太低,但是你所下的node版本是最新的,这时候就会报错,需要的朋友可以参考下
2023-07-07
Nodejs中的this详解
本文给大家汇总介绍了下nodejs中的this，nodejs中的this和在浏览器中javascript中的this还是有很大的差异的，小伙伴们可以研究下
2016-03-03
CentOS上安装Node.js和mongodb笔记
这篇文章主要介绍了CentOS上安装Node.js和mongodb笔记,本文讲解了Python安装、Node.js安装、npm安装、mongodb驱动安装、mongodb数据库操作测试代码等内容,需要的朋友可以参考下
2015-04-04
node.js中express-session配置项详解
本篇文章主要介绍了node.js中express-session配置项详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05
nodejs进阶(6)—连接MySQL数据库示例
本篇文章主要介绍了nodejs进阶(6)—连接MySQL数据库示例，详细的介绍了NodeJS操作MySQL数据库，作为应用最为广泛的开源数据库则成为我们的首选，有兴趣的可以了解一下。
2017-01-01
Node快速切换版本、版本回退(降级)、版本更新(升级)
这篇文章主要介绍了Node快速切换版本、版本回退(降级)、版本更新(升级)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-01-01
如何用Node.js编写内存效率高的应用程序
这篇文章主要介绍了如何用Node.js编写内存效率高的应用程序，对Node.js感兴趣的同学，可以参考下
2021-04-04
node(koa2) web应用模块介绍详解
这篇文章主要介绍了node(koa2) web应用模块介绍详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-03-03

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具