node用express做的一个小相册

项目地址：https://github.com/prettyRain/littleAlbumTwo

项目名 littleAlbumTwo
controller ：路由
modles：模块中心
node_modules : 下载的模块（express（封装nodejs）、formidable（上传文件、图片）、silly-datetime）
public : 页面用到的 js css 图片
uploads：存放相册文件夹文件夹中有图片
views：页面展示
app.js : 控制中心

image.png

app.js

/**
 * Created by prettyRain on 2018/9/18.
 */
//下载的
var express = require('express');
var bodyParser = require('body-parser');
var app = express();
//自己写的
var route = require('./controller');
//ejs 模板
app.set('view engine','ejs');
//静态页面
app.use(express.static('./public'));
app.use(express.static('./uploads'));


//首页
app.get('/',route.index);
//创建相册
app.use(bodyParser.urlencoded({ extended: true }));
app.get('/addxiangce',route.addxiangce);
app.post('/addxiangce',route.postaddxiangce);
//查看个人相册
app.get('/album/:albumByName',route.albumByName);
//上传图片
app.get('/uppage',route.uppage);
app.post('/uppost',route.uppost);
//展示
app.get('/ablumAll',route.ablumAll);
//删除
app.get('/deletedir',route.deletedir);
//下载图片
app.post('/downphoto',route.downphoto);

app.use("/",route.errorpage);
app.listen(4000);

controller package.json

{
  "name": "controller",
  "version": "0.0.1",
  "main": "route.js"
}

controller route.js

/**
 * Created by prettyRain on 2018/9/18.
 */

var file = require('../models/file.js');
var path = require('path');
var fs = require('fs');

/**
 * 首页
 * @param req
 * @param res
 * @param next
 */
exports.index = function(req,res,next){
    file.index(function(err,arr){
        if(err){
            next();
            return;
        }
        res.render('index',{
            fiels:arr
        });
    });
}
/**
 * 添加相册页面
 * @param req
 * @param res
 * @param next
 */
exports.addxiangce = function(req,res,next){
    file.index(function(err,arr){
        if(err){
            next();
            return;
        }
        res.render('addxiangce',{
            fiels:arr
        });
    });
}
/**
 * 添加相册
 * @param req
 * @param res
 * @param next
 */
exports.postaddxiangce = function(req,res,next){
    var xcmingchen = req.body.xcmingchen;
    file.postaddxiangce(xcmingchen,function(err){
        if(err){
            next();
            return;
        }
        res.send('success');
    });
}
/**
 * 展示个人相册
 * @param req
 * @param res
 * @param next
 */
exports.albumByName = function(req,res,next){
    var name = req.params.albumByName;
    console.log(name);
    file.albumByName(name,function(err,files){
        if(err){
            next();
            return;
        }
        res.render('album',{
            fiels:files,
            name:name
        });
    });
}
/**
 * 上传图片页面
 * @param req
 * @param res
 * @param next
 */
exports.uppage = function(req,res,next){
    file.index(function(err,arr){
        if(err){
            next();
            return;
        }
        res.render('uppage',{
            fiels:arr
        });
    });
}
/**
 * 上传图片
 * @param req
 * @param res
 * @param next
 */
exports.uppost = function(req,res,next){
  file.uppost(req,function(err){
      if(err && err=="文件太大"){
          res.send("文件太大");
      }else if(err){
          res.send("上传失败");
      }else{
          res.send("上传成功");
      }
  })
}
/**
 * 展示所有相片
 * @param req
 * @param res
 * @param next
 */
exports.ablumAll = function(req,res,next){
    file.ablumAll(function(err,fiels){
        if(err){
            console.log(err);
            next();
            return;
        }
        res.render('ablumAll',{fiels:fiels})
    });
}
/**
 * 删除文件或文件夹
 * @param req
 * @param res
 * @param next
 */
exports.deletedir = function(req,res,next){
    console.log(req.query.arr);
    file.deletedir(req.query.arr,function(err){
        if(err){
            next();
            return;
        }
        res.send('success');
    })
}
/**
 * 下载图片
 * @param req
 * @param res
 * @param next
 */
exports.downphoto = function(req,res,next){
    var arr = req.body.arr;
  console.log(arr);
   
        var name = arr;
        var photoname = (name).replace(/[^x00-xff]+(\w+.\w+$)/,function(a,b){
            return b;
        });
        var urlpath = path.normalize(__dirname+"/../uploads/"+name);
    
        // 实现文件下载
        var filePath = urlpath;
        var stats = fs.statSync(filePath);
        if(stats.isFile()){
            res.set({
                'Content-Type': 'application/octet-stream',
                'Content-Disposition': 'attachment; filename='+photoname,
                'Content-Length': stats.size
            });
            fs.createReadStream(filePath).pipe(res);
        } else {
            next();
        }
    
}
/**
 * 错误页面
 * @param req
 * @param res
 * @param next
 */
exports.errorpage = function(req,res){
    res.render('errPage');
}

models file.js

/**
 * Created by prettyRain on 2018/9/18.
 */

var fs = require('fs');
var path = require('path');
var dt = require('silly-datetime');
var formidable = require('formidable');
exports.index = index;
exports.postaddxiangce = postaddxiangce;
exports.albumByName = albumByName;
exports.uppost = uppost;
exports.ablumAll = ablumAll;
exports.deletedir = deletedir;
function index(callback){
   
    fs.readdir('./uploads',function(err,files){
        if(err){
            callback("错误",null);
            return;
        }
        var arr = [];
        (function showdir(i){
            if(i == files.length){
                callback(null,arr);
                //记得要停止
                return;
            }
            fs.stat('./uploads/'+files[i],function(err,stats){
                if(err){
                    callback('错误',null);
                    return;
                }
                if(stats.isDirectory()){
                    arr.push(files[i]);
                }
                showdir(i+1);
            });
        })(0);
    });
}

function postaddxiangce(name,callback){

    fs.mkdir('./uploads/'+name,function(err){
        if(err){
            callback("错误");
            return;
        };
        callback();
    })
}

function albumByName(name,callback){
    fs.readdir('./uploads/'+name,function(err,files){
        if(err){
            callback("错误",null);
            return;
        }
        var arr = [];
        (function showfiles(i){
            if(files.length == i){
                callback(null,arr);
                return;
            }
            fs.stat('./uploads/'+name+"/"+files[i],function(err,stats){
                if(err){
                    callback("错误",null);
                    return;
                }
                if(stats.isFile()){
                    arr.push(files[i]);
                }
                showfiles(i+1);
            });
        })(0);
    })
}

function uppost(req,callback){
    var form = new formidable.IncomingForm()
    form.encoding = 'utf-8';
    form.uploadDir = "./tempup";
    form.parse(req, function(err, fields, files) {
        if(err){
            callback("错误");
            return;
        }
        var photoname = dt.format(new Date(),'YYYYMMDDHHmmss')+(parseInt(Math.random()*(9999-1000))+1000) + path.extname(files.photo.name);
        var newpath = "./uploads/"+fields.albumname+"/"+photoname;
        var oldpath = "./"+files.photo.path;
       
        if(files.photo.size > 1024*1024){
            fs.unlink(oldpath,function(err){
                if(err){
                    callback("错误");
                    return;
                }
            });
            callback("文件太大");
            return;
        }
        fs.rename(oldpath,newpath,function(err){
            if(err){
                console.log(err);
                callback("错误");
                return;
            }
            callback();
        });
        
    });
}

function ablumAll(callback){
    fs.readdir('./uploads',function(err,files){
        if(err){
            callback("1",null);
            return;
        }
        var arr = [];
        
        (function showarr(i){
            if(i == files.length){
                callback(null,arr);
                return;
            }
            console.log(i);
            fs.stat('./uploads/'+files[i],function(err,stats){
                if(err){
                    console.log(err);
                    callback("2",null);
                    return;
                }else {
                    if (stats.isDirectory()) {
                        fs.readdir('./uploads/' + files[i], function (err, newfiles) {
                            (function newshow(j) {
                                if (j == newfiles.length) {
                                    showarr(i + 1);
                                    return;
                                }
                                fs.stat('./uploads/' + files[i] + "/" + newfiles[j], function (err, stats) {
                                    if (err) {
                                        callback("3", null);
                                        return;
                                    }
                                    if (stats.isFile()) {
                                        arr.push(files[i] + "/" + newfiles[j]);
                                    }
                                    newshow(j + 1);
                                });
                            })(0)
                        })
                    } else {
                        showarr(i + 1);
                    }
                }
            });
        })(0);
    });
}

function deletedir(arr,callback){
    (function listarr(k){
        if(arr.length == k){
            callback();
            return;
        }
        fs.stat("./uploads/"+arr[k],function(err,stats){
            if(stats.isDirectory()){
                fs.readdir('./uploads/'+arr[k],function(err,files){
                    (function deletefile(i){
                        if(i == files.length){
                            fs.rmdir('./uploads/'+arr[k],function(err){
                                if(err){
                                    callback("1");
                                }
                            })
                            listarr(k+1);
                            return;
                        }
                        fs.unlink('./uploads/'+arr[k]+'/'+files[i],function(err){
                            if(err){
                                callback("2");
                            }
                            deletefile(i+1);
                        });
                    })(0)
                });
            
            }else if(stats.isFile()){
                fs.unlink('./uploads/'+arr[k],function(err){
                    if(err){
                        callback('3');
                        return;
                    }
                    listarr(k+1);
                });
            }
        })
    })(0);
   }

public bootstrap

image.png

public images

image.png

public newtip.css


.tip {
    text-align:center;
    line-height:30px;
    animation:mymove .8s forwards;
    z-index:10000;
    position:fixed;
    top:-20px;
    left:50%;
    margin-left:-50px;
    min-width:100px;
    height:30px;
    padding:0 5px;
    border-radius:15px;
    background-image:linear-gradient(135deg,yellow 25%,#ffba44 25%,#ffba44 50%,yellow 50%,yellow 75%,#ffba44 75%,#ffba44 100% );
    background-size:30px 30px;
    background-position:0 0;
    background-repeat:repeat-x;
}
@keyframes mymove {
    from{
        transform:translateY(0);
    }
    to{
        transform:translateY(200px);
    }
}

public newtip.js 弹出框

/**
 * 弹出框  
 * Created by prettyRain on 2018/9/18.
 */

function alerttip(){
    var timer ;
    return function(content){
        window.clearTimeout(timer);
        timer = window.setTimeout(function(){
          $('body').append("<div class='tip'>"+content+"</div>");
          window.setTimeout(function(){
              $('.tip').remove();
          },1500)
        },1000)
    }
}

views index.ejs 首页

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>小小相册</title>
    <!-- Bootstrap core CSS -->
    <link href="/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="/newtip.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="container" style="box-sizing:border-box">
    <nav class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">小小相册</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
                <ul class="nav navbar-nav">
                    <li><a href="/addxiangce">添加相册</a></li>
                    <li><a href="/uppage">上传</a></li>
                    <li><a href="/ablumAll">展示</a></li>
                    <li><a href="javascript:deletedir()">删除</a></li>
                </ul>
            </div>
        </div>
    </nav>


    <div class="jumbotron">
        <div class="row">
            <%for(var i in fiels){%>
            <div class="col-xs-6 col-md-3">
                <a href="/album/<%=fiels[i]%>" class="thumbnail">
                    <img src="/images/xiangche.jpg" alt="...">
                </a>
                <p style="text-align:center;font-size:14px;"><input type="checkbox" name="dir" value="<%=fiels[i]%>"><%=fiels[i]%></p>
            </div>
            <%}%>
        </div>
    </div>

</div> <!-- /container -->
<div class="modal fade" tabindex="-1" role="dialog" id="myInput">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">
                <p>确认删除吗?&hellip;</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary isdelete">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/newtip.js" type="text/javascript"></script>
<script>
    var arr = [];
    function deletedir(){
        arr = [];
        $('input[name=dir]:checked').each(function(index,item){
            console.log(index,item);
            arr.push(item.value);
        })
        if(arr.length>0){
            $('#myInput').modal('show')
        }
    }
    $('.isdelete').on('click',function(){
        $('#myInput').modal('hide');
        $.get('/deletedir',{arr:arr},function(data){
            if(data=='success'){
                window.location.href='/'
            }
        })
    })

</script>
</body>
</html>

views addxiangce.ejs 添加相册

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>小小相册</title>
    <!-- Bootstrap core CSS -->
    <link href="/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="/newtip.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>

<div class="container">
    <nav class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">小小相册</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
                <ul class="nav navbar-nav">
                    <li><a class="active" href="/addxiangce">添加相册</a></li>
                    <li><a href="/uppage">上传</a></li>
                    <li><a href="/ablumAll">展示</a></li>
                    <li><a href="#contact">删除</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <%for(var i in fiels){%>
        <input type="hidden" class="xcmingchen" value="<%=fiels[i]%>">
    <%}%>
    <div class="jumbotron">
        <form  method="post" action="./addxiangce">
            <div class="form-group">
                <label for="exampleInputFile">相册名称</label>
                <input type="text" id="exampleInputFile" class="form-control" name="xcmingchen">
            </div>
            <button type="botton" class="btn btn-default">提交</button>
        </form>
    </div>

</div> <!-- /container -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/newtip.js" type="text/javascript"></script>
<script>
    var tip = alerttip();

    var xcmingchenarr = [];
    $('.xcmingchen').each(function(index,item){
        xcmingchenarr.push($(this).val());
    })
    function requireform(){
        if(!$('input[name=xcmingchen]').val()){
            tip('相册名称不能为空');
            return false;
        }else if(xcmingchenarr.join('-').indexOf($('input[name=xcmingchen]')) != -1 ){
            tip('相册名称已被占用');
            return false;
        }
        return true;
    }
    $('.btn-default').on('click',function(){
        console.log(xcmingchenarr.join('-')+"=="+$('input[name=xcmingchen]'));
        if(!$('input[name=xcmingchen]').val()){
            tip('相册名称不能为空');
            return false;
        }else if(xcmingchenarr.join('-').indexOf($('input[name=xcmingchen]').val()) != -1 ){
            tip('相册名称已被占用');
            return false;
        }
        $.post('/addxiangce',{xcmingchen:$('#exampleInputFile').val()},function(data){
            console.log(data);
            window.location.href='/';
        });
    })

</script>
</body>
</html>

views album.ejs 展示个人相册

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">
    <title>小小相册</title>
    <!-- Bootstrap core CSS -->
    <link href="/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="/newtip.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="container" style="box-sizing:border-box">
    <nav class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">小小相册</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
                <ul class="nav navbar-nav">
                    <li><a href="/addxiangce">添加相册</a></li>
                    <li><a href="/uppage">上传</a></li>
                    <li><a href="/ablumAll">展示</a></li>
                    <li><a href="javascript:deletedir();">删除</a></li>
                    <li><a href="javascript:download();">下载图片（只能选一张）</a></li>
                </ul>
            </div>
        </div>
    </nav>


    <div class="jumbotron">
        <div class="row">
            <%for(var i in fiels){%>
            <div class="col-xs-6 col-md-3">
                <a href="/<%=name%>/<%=fiels[i]%>" class="thumbnail">
                    <img src="/<%=name%>/<%=fiels[i]%>" alt="...">
                </a>
                <p style="text-align:center;font-size:14px;"><input type="checkbox" name="dir" value="<%=name%>/<%=fiels[i]%>"><%=fiels[i]%>></p>
            </div>
            <%}%>
        </div>
    </div>

</div> <!-- /container -->
<div class="modal fade" tabindex="-1" role="dialog" id="myInput">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">
                <p>确认删除吗?&hellip;</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary isdelete">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/newtip.js" type="text/javascript"></script>
<script>
    var arr = [];
    function deletedir(){
        arr = [];
        $('input[name=dir]:checked').each(function(index,item){
            arr.push(item.value);
        })
        if(arr.length>0){
            $('#myInput').modal('show')
        }
    }
    $('.isdelete').on('click',function(){
        $('#myInput').modal('hide');
        $.get('/deletedir',{arr:arr},function(data){
            if(data=='success'){
                window.location.href='/album/'+ '<%=name%>'
            }
        })
    })

    function download(){
        $('.formclazz').remove();
        $('input[name=dir]:checked').each(function(index,item){
            $('body').append('<form action="/downphoto" method="post" class="formclazz '+index+'a"> </form>');
            $('.'+index+'a').append($('<input type="hidden" name="arr" value="'+item.value+'">'));
        })
        $('.formclazz').submit();
    }

</script>
</body>
</html>

views uppage.ejs 上传照片

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>小小相册</title>

    <!-- Bootstrap core CSS -->
    <link href="/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="/newtip.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

<div class="container" style="box-sizing:border-box">
    <nav class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">小小相册</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
                <ul class="nav navbar-nav">
                    <li><a href="/addxiangce">添加相册</a></li>
                    <li><a href="/uppage">上传</a></li>
                    <li><a href="/ablumAll">展示</a></li>
                    <li><a href="#contact">删除</a></li>
                </ul>
            </div>
        </div>
    </nav>


    <div class="jumbotron">
        <div class="row">
        <form action="/uppost" method="post" enctype="multipart/form-data" onsubmit="return requireform()">
            <div class="form-group">
                <label for="exampleInputPassword1">Password</label>
                <select name="albumname" id="" class="form-control">
                    <%for(var i in fiels){%>
                    <option value="<%=fiels[i]%>"><%=fiels[i]%></option>
                    <%}%>
                </select>
            </div>
            <div class="form-group">
                <label for="exampleInputFile">File input</label>
                <input type="file" id="exampleInputFile" accept="image/*" name="photo">
            </div>
            <button type="submit" class="btn btn-default">提交</button>
        </form>


        </div>
    </div>

</div> <!-- /container -->

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/newtip.js" type="text/javascript"></script>
<script>
    var tip = alerttip();
    function requireform(){
      if(!$('input[name=photo]').val()){
          tip('请选择图片');
          return false;
      }
      return true;
  }
</script>
</body>
</html>

views ablumAll.ejs 展示所有相片

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>小小相册</title>

    <!-- Bootstrap core CSS -->
    <link href="/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="/newtip.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="container" style="box-sizing:border-box">
    <nav class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">小小相册</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
                <ul class="nav navbar-nav">
                    <li><a href="/addxiangce">添加相册</a></li>
                    <li><a href="/uppage">上传</a></li>
                    <li><a href="/ablumAll">展示</a></li>
                    <li><a href="javascript:deletedir();">删除</a></li>
                </ul>
            </div>
        </div>
    </nav>


    <div class="jumbotron">
        <div class="row">
            <%for(var i in fiels){%>
            <div class="col-xs-6 col-md-3">
                <a href="/<%=fiels[i]%>" class="thumbnail">
                    <img src="/<%=fiels[i]%>" alt="...">
                </a>
                <p style="text-align:center;font-size:14px;"><input type="checkbox" name="dir" value="<%=fiels[i]%>"><%=fiels[i]%></p>
            </div>
            <%}%>
        </div>
    </div>

</div> <!-- /container -->
<div class="modal fade" tabindex="-1" role="dialog" id="myInput">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">
                <p>确认删除吗?&hellip;</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary isdelete">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/newtip.js" type="text/javascript"></script>
<script>
    var arr = [];
    function deletedir(){
        arr = [];
        $('input[name=dir]:checked').each(function(index,item){
            console.log(index,item);
            arr.push(item.value);
        })
        if(arr.length>0){
            $('#myInput').modal('show')
        }
    }
    $('.isdelete').on('click',function(){
        $('#myInput').modal('hide');
        $.get('/deletedir',{arr:arr},function(data){
            if(data=='success'){
                window.location.href='/ablumAll'
            }
        })
    })

</script>
</body>
</html>

views errPage.ejs 错误页面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">
    <title>小小相册</title>
    <!-- Bootstrap core CSS -->
    <link href="/bootstrap/css/bootstrap.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="container">
    <!-- Static navbar -->
    <nav class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">小小相册</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
                <ul class="nav navbar-nav">
                    <li><a href="/addxiangce">添加相册</a></li>
                    <li><a href="/uppage">上传</a></li>
                    <li><a href="/ablumAll">展示</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="jumbotron">
       <image src="/images/errPage.gif" style="width:100%;"></image>
    </div>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

最后编辑于：2019.01.02 15:14:07

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,793评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,567评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,342评论 0赞 338
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,825评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,814评论 5赞 368
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,680评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,033评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,687评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 42,175评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,668评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,775评论 1赞 332
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,419评论 4赞 321
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,020评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,978评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,206评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,092评论 2赞 351
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,510评论 2赞 343

node用express做的一个小相册

推荐阅读更多精彩内容