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 相关文章推荐
XML+XSL 与 HTML 两种方案的结合
Apr 22 Javascript
jquery 插件 任意位置浮动固定层
Dec 25 Javascript
用Javascript 获取页面元素的位置的代码
Sep 25 Javascript
javascript 时间比较实现代码
Oct 28 Javascript
JavaScript中json使用自己总结
Aug 13 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
May 17 Javascript
JavaScript操作文件_动力节点Java学院整理
Jun 30 Javascript
详解Vue 全局引入bass.scss 处理方案
Mar 26 Javascript
详解vue-cli下ESlint 配置说明
Sep 03 Javascript
JavaScript格式化json和xml的方法示例
Jan 22 Javascript
如何提升vue.js中大型数据的性能
Jun 21 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
Sep 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模拟asp中的XmlHttpRequest实现http请求的代码
2011/03/24 PHP
PHP 删除文件与文件夹操作 unlink()与rmdir()这两个函数的使用
2011/07/17 PHP
php中使用base HTTP验证的方法
2015/04/20 PHP
php猴子选大王问题解决方法
2015/05/12 PHP
jquery+php实现导出datatables插件数据到excel的方法
2015/07/06 PHP
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
2012/01/13 Javascript
js indexOf()定义和用法
2012/10/21 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
JS中完美兼容各大浏览器的scrolltop方法
2015/04/17 Javascript
vue-router history模式下的微信分享小结
2018/07/05 Javascript
微信小程序—setTimeOut定时器的问题及解决
2019/07/26 Javascript
Vue 中可以定义组件模版的几种方式
2019/08/06 Javascript
策略模式实现 Vue 动态表单验证的方法
2019/09/16 Javascript
js实现贪吃蛇小游戏
2019/10/29 Javascript
vue组件开发之slider组件使用详解
2020/08/21 Javascript
python有证书的加密解密实现方法
2014/11/19 Python
python二分查找算法的递归实现方法
2016/05/12 Python
Python 基础知识之字符串处理
2017/01/06 Python
python利用dir函数查看类中所有成员函数示例代码
2017/09/08 Python
Python3简单实例计算同花的概率代码
2017/12/06 Python
python顺序的读取文件夹下名称有序的文件方法
2018/07/11 Python
python3实现网络爬虫之BeautifulSoup使用详解
2018/12/19 Python
OpenCV搞定腾讯滑块验证码的实现代码
2019/05/18 Python
如何在Python中实现goto语句的方法
2019/05/18 Python
Python迷宫生成和迷宫破解算法实例
2019/12/24 Python
python实现滑雪游戏
2020/02/22 Python
python实现TCP文件传输
2020/03/20 Python
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
2013/01/30 HTML / CSS
Betsey Johnson官网:妖娆可爱的连衣裙及鞋子、手袋和配件
2016/12/30 全球购物
学前教育专业毕业生自荐信
2013/10/03 职场文书
保安队长职务说明书
2014/02/23 职场文书
中班开学寄语
2014/04/04 职场文书
电子信息工程专业求职信
2014/06/28 职场文书
美术第二课堂活动总结
2014/07/08 职场文书
培训计划通知
2015/07/15 职场文书
80后创业总结的9条职场用人思想,记得收藏
2019/08/13 职场文书