node.js實(shí)現(xiàn)多圖片上傳實(shí)例

更新時(shí)間：2014年06月03日 10:40:29 作者：

這篇文章主要介紹了node.js實(shí)現(xiàn)多圖片上傳實(shí)例,包括路由、控制器和視圖的源碼,重點(diǎn)在圖片上傳處理程序,需要的朋友可以參考下

先上效果圖：

這是我當(dāng)時(shí)做多圖片的代碼，拿出來(lái)給大家借鑒一下（有些地方需要親們自己改一下，大方向是對(duì)的）

總共涉及到三處文件（常規(guī)來(lái)說(shuō)）

1.路由入口文件(我這里是/routes.js,很多時(shí)候會(huì)在/app.js)

復(fù)制代碼代碼如下:

  //添加美食
  app.all('/add', users.add);

2.路由控制器文件（我這里是/routes/users.js）

復(fù)制代碼代碼如下:

//添加美食
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:'發(fā)布美食-'+config.name,name:config.name,user:user});
} else if (req.method == "POST") {
    //獲取數(shù)據(jù)
    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{
        //沒(méi)有圖片
        //數(shù)據(jù)
        var data = {
            x:x,//經(jīng)度
            y:y,//維度
            cat_id:cat_id,//分類(lèi)id
            cat_name:cat_name,//分類(lèi)名稱(chēng)
            address:address,//地址
            title:title,//標(biāo)題
            desc:desc,//簡(jiǎn)介
            content:content,//內(nèi)容
            pics:pics,//圖片字段，以','隔開(kāi)多張圖片
            price:price,//價(jià)格
            tags:tags,//標(biāo)簽以','隔開(kāi)多個(gè)
            add_time:add_time,//支持度
            support:support,//支持度默認(rèn)為0
            uid:uid//用戶(hù)id 可匿名
        };
        food_preDao.insert(data, function (err, food) {
            if(err){
                res.json({err:100,content:'數(shù)據(jù)庫(kù)錯(cuò)誤'});
            }else{
                res.json({err:0,content:'發(fā)布成功！',data:food});
            }

});
}

}
};

3.視圖文件（我這里是/views/users/food_add.ejs）

復(fù)制代碼代碼如下:

            var name;
            name=path.split('\\');
            var bb=name[name.length-1];
            //alert(bb.substr(0,bb.indexOf('.'))); //AddFile 結(jié)果

            $(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>經(jīng)度：</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>分類(lèi)：</td><td><select name="cat_id"><option value="1">分類(lèi)1</option></select></td>
        </tr>
        <tr>
            <td>地址：</td><td><input type="text" name="address" id="address" /></td>
        </tr>
        <tr>
            <td>標(biāo)題：</td><td><input type="text" name="title" id="title" /></td>
        </tr>
        <tr>
            <td>簡(jiǎn)介：</td><td><input type="text" name="desc" id="desc" /></td>
        </tr>
        <tr>
            <td>內(nèi)容：</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>價(jià)格：</td><td><input type="text" name="price" id="price" /></td>
        </tr>
        <tr>
            <td>標(biāo)簽：</td><td><input type="text" name="tags" id="tags" /></td>
        </tr>
        <tr>
            <td colspan="2"><input type="submit" value="提交" /></td>
        </tr>
    </table>
</form>