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 相关文章推荐
javascript定时保存表单数据的代码
Mar 17 Javascript
jQuery实现点击该行即可删除HTML表格行
Oct 17 Javascript
jQuery创建DOM元素实例解析
Jan 19 Javascript
使用RequireJS优化JavaScript引用代码的方法
Jul 01 Javascript
Javascript将数字转化成为货币格式字符串
Jun 22 Javascript
使用async-validator编写Form组件的方法
Jan 10 Javascript
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
js数据类型检测总结
Aug 05 Javascript
vue组件之间的数据传递方法详解
Apr 19 Javascript
三步实现ionic3点击退出app程序
Sep 17 Javascript
js实现3D照片墙效果
Oct 28 Javascript
Vue双向绑定实现原理与方法详解
May 07 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中SESSION反序列化机制
2017/03/01 PHP
javascript预览上传图片发现的问题的解决方法
2010/11/25 Javascript
用js来获取上传的文件名纯粹是为了美化而用
2013/10/23 Javascript
JS解析XML实例分析
2015/01/30 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
2015/03/20 Javascript
JavaScript动态改变表格单元格内容的方法
2015/03/30 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
2015/05/09 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
2015/08/31 Javascript
浅析Bootstrap缩略图组件与警示框组件
2016/04/29 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
2016/11/22 Javascript
jQuery获取随机颜色的实例代码
2018/05/21 jQuery
Vue高版本中一些新特性的使用详解
2018/09/25 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
2018/10/29 Javascript
使用layui定义一个模块并使用的例子
2019/09/14 Javascript
加速vue组件渲染之性能优化
2020/04/09 Javascript
解析Python编程中的包结构
2015/10/25 Python
Python2与python3中 for 循环语句基础与实例分析
2017/11/20 Python
使用Python抓取豆瓣影评数据的方法
2018/10/17 Python
python生成lmdb格式的文件实例
2018/11/08 Python
Python通过len函数返回对象长度
2020/10/22 Python
River Island美国官网:英国高街时尚品牌
2018/09/04 全球购物
ZINVO手表官网:男士和女士手表
2019/03/10 全球购物
编程输出如下图形
2013/11/24 面试题
高级Java程序员面试要点
2013/08/02 面试题
韩语专业本科生求职信
2013/10/01 职场文书
药学专业大学生个人的自我评价
2013/11/04 职场文书
致200米运动员广播稿
2014/02/06 职场文书
法学专业求职信
2014/07/15 职场文书
2014年学生会部门工作总结
2014/11/07 职场文书
师德师风个人总结
2015/02/06 职场文书
慰问信模板
2015/02/14 职场文书
《比的意义》教学反思
2016/02/18 职场文书
sql server 累计求和实现代码
2022/02/28 SQL Server
三种方式清除vue路由跳转router-link的历史记录
2022/04/10 Vue.js
JS轻量级函数式编程实现XDM三
2022/06/16 Javascript
Promise静态四兄弟实现示例详解
2022/07/07 Javascript