js利用node.js 多图上传功能简单介绍

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

二.路由控制文件:

在本代码中是/routes/users.js

代码如下:

<script>
//添加美食
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.name){
        file_obj2.push(file_obj);
      }
    }
    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});
         }
       });
    }
  }
};
</script>

三视图文件:

本代码中是/views/users/food_add.ejs

代码如下:

<script>
<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;
    //C:\\Documents and Settings\\hud\\桌面\\AddFile.jpg
    path=$(obj).val();      
    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">+</span><input type="file" name="pics" id="pics" class="upload_input" /></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">+</span>
          <input type="file" name="pics" id="pics" class="upload_input" />
        </div>
        <div class="upload_item" index="1"><span class="upload_item_add">+</span>
          <input type="file" name="pics" id="pics" class="upload_input" />
        </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>
</script>