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

先我们来看单文件图片上传

单个的实现我是这样的

 代码如下 复制代码
fs.readFile(req.files['file'].path, function(err, data){
         fs.writeFile(newPath, data, function(err){
               //上传成功
          })
});

如果多文件上传我们只要在此基础上进行修改即可,下面看一个实例。

先看图

这是我当时做多图片的代码,拿出来给大家借鉴一下(有些地方需要亲们自己改一下,大方向是对的)

总共涉及到三处文件(常规来说)

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 Settingshud桌面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>

时间: 2024-09-26 09:51:27

node.js实现多图片文件上传实例的相关文章

php图片文件上传实例代码

 代码如下 复制代码 <html xmlns="http://www.111cn.net/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>php教程图片文件上传实例代码</title> </head> <body> &

php+ajax实现图片文件上传实例代码

方法一,利用jquery ajaxfileupload.js文件上传 其实就是实现无刷新式的文件上传.可采用IFRAME文件上传原理. 实际上在用PHP上传文件时...只能用$_FILES形式,但是若我们只是单一的用JS方式取其ID,如<input id='img' type='file'>..document.getElementById('img').value或者jquery形式的$("#img")都是不能正真实际上传的(但是还是有很多人这样做,刚开始时我也是). 可

PHP swfupload图片文件上传实例代码

效果图 ps://harde.org/blog/wp-content/uploads/2010/04/swfupload01.jpg" /> index.php文件  代码如下 复制代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <h

JS组件系列——Bootstrap文件上传组件:bootstrap fileinput

JS组件系列--Bootstrap文件上传组件:bootstrap fileinput 前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签,效果不忍直视,于是博主下定决心要找一个好看的上传组件换掉它.既然bootstrap开源,那么社区肯定有很多关于它的组件,肯定也有这种常见的上传组件吧.经过一番查找,功夫不负有心人,还是被博主找到了这个组件:boo

原生ajax和iframe框架实现图片文件上传的两种方式_AJAX相关

大家应该可以举出几种常用的异步文件上传功能的实现方式,使用频率较多的有原生ajax和iframe框架,实现图片文件上传,下面就为大家分享图片文件上传的两种方式:原生ajax和iframe框架,供大家参考,具体内容如下 方法一:利用iframe框架上传图片 html代码如下: <div class="frm"> <form name="uploadFrom" id="uploadFrom" action="upload.

jsp页面-怎样将图片文件上传到oracle

问题描述 怎样将图片文件上传到oracle 在JSP页面中要进行图片的上传,怎样通过file上传到oracle数据库中啊 解决方案 http://unixtux.iteye.com/blog/1602290http://www.docin.com/p-872867386.htmlhttp://blog.csdn.net/zmwg1/article/details/5654304 解决方案二: 存图片的存储地址,就可以了 解决方案三: 在数据库中保存图片常用的是两种形式 1.保存图片的路径,将图片

使用jQuery.form.js/springmvc框架实现文件上传功能_jquery

使用的技术有jquery.form.js框架, 以及springmvc框架.主要实现异步文件上传的同时封装对象,以及一些注意事项. 功能本身是很简单的,但是涉及到一些传递参数类型的问题.例如:jquery的ajax方法与jquery.form.js中的ajaxSubmit方法的参数,具体细节将在下一篇博客中分享. 重点: html表格三要素: action="fileUpload/fileUpload" method="post" enctype="mul

java web图片上传和文件上传实例_java

图片上传和文件上传本质上是一样的,图片本身也是文件.文件上传就是将图片上传到服务器,方式虽然有很多,但底层的实现都是文件的读写操作. 注意事项 1.form表单一定要写属性enctype="multipart/form-data" 2.为了能保证文件能上传成功file控件的name属性值要和你提交的控制层变量名一致, 例如空间名是file那么你要在后台这样定义 private File file; //file控件名 private String fileContentType;//图

php图片文件上传详细分析

upload_err_ok              no error occurred. 上传成功   upload_err_ini_size        the uploaded file exceeds the maximum value specified in the php教程.ini file. 超出最大上传尺寸 upload_err_form_size       the uploaded file exceeds the maximum value specified by