express(jade或ejs)如何实现上传图片到服务器并在客户端展示（在客户端可以删除）

详细代码见： https://github.com/marujun/imageUpload

使用ejs编写不使用jade查看上面链接GitHub

关键点：

如果express的版本低于3.0的时候使用下面的语句：

效果图：

首先需要创建一个express项目：然后在app.js中添加几个接口模块:

app.get('/', routes.index);//主页面
app.get('/upload',routes.upload);//上传图片页面
app.get('/show/:imaNames',routes.show);//传送图片接口
app.get('/getImageNameJson',routes.getImageNameJson);//传送服务器图片存储json
app.post('/upload/image',routes.postFile);//上传图片接口
app.get("/delete/:id",routes.delete);//删除图片接口
app.get("/javaScriptCss/:file",routes.javaScriptCss);//css和javascript文件接口

在index.js文件中添加模块接口具体代码：

var querystring = require("querystring"),
    fs = require("fs"),
    formidable = require("formidable");
exports.index = function(req, res){
    fs.readdir("./public/images/", function (err, files) {
        var count = files.length;
        res.render('index',{num:count});
        res.end();
    });
};

exports.javaScriptCss=function(req,res){
    switch(req.params.file)
    {
        case 'function.js':
            fs.readFile('./public/javascripts/function.js',function (err, data) {
                if (err) throw err;
                res.send(data);
                res.end();
            });
            break;
        case 'jquery-1.7.2.js':
            fs.readFile('./public/javascripts/jquery-1.7.2.js',function (err, data) {
                if (err) throw err;
                res.send(data);
                res.end();
            });
            break;
        case 'style.css':
            fs.readFile('./public/stylesheets/style.css',function (err, data) {
                if (err) throw err;
                res.send(data);
                res.end();
            });
            break;
        case 'uploadStyle.css':
            fs.readFile('./public/stylesheets/uploadStyle.css',function (err, data) {
                if (err) throw err;
                res.send(data);
                res.end();
            });
    }
};

exports.upload=function(req,res){
    res.render('file-upload');
    res.end();
};


exports.postFile=function(req, res, next) {//用户上传图片
    fs.readdir("./public/images/", function (err, files) {
        var count = files.length+1;
        if(req.files.addImage.size==0)//判断用户上传的内容是否为空
        {
            res.redirect('http://localhost:3000/upload');
//            res.send("<br>"+"<br>"+"<br>"+"请选择需要上传的文件！！！");
        }
        else{
            var tmp_path = req.files.addImage.path; // 获得文件的临时路径
            var target_path = './public/images/' +req.files.addImage.name;// 指定文件上传后的目录
            fs.rename(tmp_path, target_path, function(err) { // 移动文件
                if (err) throw err;
                fs.unlink(tmp_path, function() {// 删除临时文件夹文件,
                    if (err) throw err;
                    res.redirect('http://localhost:3000');
                    res.end();
                });
            });}
    });
};


exports.getImageNameJson=function(req,res){ //向客户端传送服务器图片信息
    fs.readdir("./public/images/", function (err, files) {//读取文件夹下文件
        var count = files.length,
            results =new Array() ;
        files.forEach(function (filename) {
            fs.readFile(filename, function (data) {
                var tmpResult={};
                tmpResult["imageName"]=filename;
                tmpResult["imagePath"] = "./public/images/"+filename;
                results[count-1]=tmpResult ;
                count--;
                if (count <= 0) {
                    console.log(results);
                    res.send(results);
                    res.end();//向客户端传送服务器图片信息（json数据格式）
                }
            });
        });
    });
};

exports.show=function(req,res){
    var ima=req.params.imaNames;
    fs.readFile("./public/images/"+ima, "binary", function(error, file) {
        if(error) {
            res.writeHead(500, {"Content-Type": "text/plain"});
            res.write(error + "\n"); res.end();
        }
        else
        {
            res.writeHead(200, {"Content-Type": "image/png"});
            res.write(file, "binary"); res.end();
        }
    });
};
exports.delete=function(req,res){//删除图片
    var fileName=req.params.id;
    fs.unlink("./public/images/"+fileName);
    res.redirect('http://localhost:3000');
};

创建index.jade文件用于主页面布局：

html
 head
      meta(http-equiv='Content-Type', content='text/html', charset='UTF-8')
      link(rel='stylesheet', href='/javaScriptCss/style.css')
      script(type='text/javascript',src='/javaScriptCss/function.js')
      script(type='text/javascript',src='/javaScriptCss/jquery-1.7.2.js')
 body(οnlοad='CreateImg(#{num})')
     div(id='divButton')
       input(type='button',value='上传图片',οnclick='redirect()',id='pageRedirect')
     div(id='divImage')

创建file-upload.jade文件用于上传页面布局：

html
   head
        meta(http-equiv='Content-Type', content='text/html', charset='UTF-8')
        link(rel='stylesheet', href='/javaScriptCss/uploadStyle.css')
        script(type='text/javascript',src='/javaScriptCss/function.js')
   body
     div(class='file-box')
        form(action='/upload/image', enctype='multipart/form-data' ,method='post')
          p 请选择需要上传的图片:
          input(type='text', name='textfield' ,id='textfield', class='txt' )
          input(type='button' ,class='btn', value='浏览...' )
          input(type='file' ,name='addImage', class='file' ,id='fileField', size='28' ,οnchange="document.getElementById('textfield').value=this.value")
          input(type='submit' ,name='submit' ,class='btn', value='上传',οnclick='check()' )

用到的javascript代码：

function.js

function CreateImg(x)
{
    var imageNameJson;
    $.getJSON("/getImageNameJson", function(json){//从服务器端获取json数据
        imageNameJson=json;
//        alert(imageNameJson[0].imagePath);
        for(var i=0;i<x;i++)
        {
            var k=1;
            if(i%2==1)
            { k=2; }
            //生成IMG
            var strImage =  document.createElement("img");
//            strImage.id=imageNameJson[i].imageName;
            strImage.style.width="512px";
            strImage.style.height="384px";
            strImage.style.float="left";
            strImage.src="/show/"+imageNameJson[i].imageName;
            strImage.style.zIndex=1;
            //生成BUTTON
            var strButton =  document.createElement("input");
            var ID=strButton.id=imageNameJson[i].imageName;
            strButton.type="button";
            strButton.value="X";
            strButton.style.zIndex=3;
            strButton.style.position="absolute";
            if(k==1)
            {strButton.style.left="489px";}
            else{strButton.style.left="1011px";}
            strButton.style.marginTop="0px";
            strButton.style.backgroundColor="transparent";
            strButton.οnclick=new Function("location.href ='/delete/"+ID+"'");
            //生成DIV
            var strDiv =  document.createElement("div");
            strDiv.style.width="522px";
            strDiv.style.height="394px";
            strDiv.style.float="left";
            //应用
            var imageDiv=document.getElementById("divImage");
            imageDiv.a(strDiv);
            strDiv.a(strImage);
            strDiv.a(strButton);
        }
    });
}
function deleteImage(x)
{
    window.location= "http://localhost:3000/delete/"+x;
}
function redirect()
{
    window.location= "http://localhost:3000/upload";
}
function check()
{
    var obj=document.getElementById("fileField");
    var fso=new ActiveXObject("Scripting.FileSystemObject");
    var image=fso.GetFile(obj.value);
    if(image.size==0)
    {
        alert("请选择需要上传的图片！");
    }
}

jquery-1.7.2.js链接： http://code.jquery.com/jquery-1.7.2.js

  

style.css代码：用于主页面布局：

#pageRedirect{
    position: absolute;
    color: red;
    font-size: x-large;
    background-color:transparent;
    left: 900px;
}
#divbutton{
    margin: 0 auto;
    width: 1024px;
    overflow: hidden;
    height: 40px;
    position: relative;
    z-index:2;
    top:0;
}
#divImage{
    margin: 0 auto;
    overflow: hidden;
    width: 1044px;
    position: relative;
}

uploadStyle.css用于上传页面的布局：

body{
    font-size:20px;
}
input{
    vertical-align:middle;
    margin:0;
    padding:0
}
p{
    height:25px;
}
.file-box{
    position:relative;
    width:340px
}
.txt{
    height:24px;
    border:1px solid #cdcdcd;
    width:180px;
    left:20px;
   
   
}
.btn{
    background-color:#FFF;
    border:1px solid #CDCDCD;
    height:24px;
    width:70px;
    font-size: 18px;
    margin-left: 5px;
}
.file{
    position:absolute;
    left: 185px;
    height:24px;
    opacity:0;
    width:70px;
}