app.js

/*
littleAlbum
--.idea
--controller(控制层相当于action层)
--package.json
--router.js
--models(做事的是model层相当于dao层)
--file.js
--node_modules(引入的其他模块)
--public(静态资源)
--css
--bootstrap.css
--fonts
--glyphicons-halflings-regular.ttf
--images
--404.jpg
--js
--npm.js
--jquery-1.11.3.min.js
--bootstrap.js
--tempup
--uploads(上传的文件)
--views(View层,数据通过ejs模版注入)
--album.ejs
--err.ejs
--index.ejs
--up.ejs
--app.js
--package.json
*/ var express = require("express");
var app = express();
//控制器
var router = require("./controller");//引入的是文件夹,文件夹里面要有index.js或者package.json文件里面的入口js文件。 //设置模板引擎
app.set("view engine", "ejs"); //路由中间件,网址正好匹配上了public下面的文件(全路径匹配),就直接返回。匹配不上就向下路由,
app.use(express.static("./public"));//静态页面,静态页面里面的资源路径如果与app.get()里面的路径重复,就只走这里。资源图片cssjs都是在public文件夹,页面都是在views文件夹。 //网址正好匹配上了uploads下面的文件(全路径匹配),就直接返回。
app.use(express.static("./uploads")); //上面匹配了就停止,上面没有匹配上,就跑到下面来匹配,首页
app.get("/", router.showIndex); app.get("/:albumName", router.showAlbum); app.get("/up", router.showUp); app.post("/up", router.doPost);
console.log(6); //404,上面都没有匹配到就404页面
app.use(function (req, res) {
res.render("err");
}); app.listen(3000);

router.js

/**
* Created by Danny on 2015/9/22 15:30.
*/
var file = require("../models/file.js");
var formidable = require('formidable');
var path = require("path");
var fs = require("fs");
var sd = require("silly-datetime"); //首页
exports.showIndex = function(req,res,next){
console.log(1);
/* 错误的:传统思维,不是node的思维:
res.render("index",{
"albums" : file.getAllAlbums() getAllAlbums里面是异步的,不能这么写,只能等这个异步执行完才行,就用回调函数
}); */ //这就是Node.js的编程思维,就是所有的东西,都是异步的
//file函数的返回值通过回调函数实现。
file.getAllAlbums(function(err,allAlabums){//实参回调函数的定义
//err是字符串
if(err){
next(); //交给下面适合他的中间件
return;
}
res.render("index",{
"albums" : allAlabums
});
})
} //相册页
exports.showAlbum = function(req,res,next){
console.log(2);
//遍历相册中的所有图片
var albumName = req.params.albumName;
//具体业务交给model
file.getAllImagesByAlbumName(albumName,function(err,imagesArray){
if(err){
next(); //交给下面的中间件
return;
}
res.render("album",{
"albumname" : albumName,
"images" : imagesArray
});
});
}; //显示上传
exports.showUp = function(req,res){//中间件有req、res
console.log(3);
//命令file模块(我们自己写的函数)调用getAllAlbums函数
//得到所有文件夹名字之后做的事情,写在回调函数里面
file.getAllAlbums( function(err,albums){res.render("up",{albums : albums} );
});
}; //上传表单
exports.doPost = function(req,res){
console.log(4);
var form = new formidable.IncomingForm(); form.uploadDir = path.normalize(__dirname + "/../tempup/");// '../表示向上回溯一级' form.parse(req, function(err, fields, files,next) {
console.log(fields);
console.log(files);
//改名
if(err){
next(); //这个中间件不受理这个请求了,往下走
return;
}
//判断文件尺寸
var size = parseInt(files.tupian.size);
if(size > 2000){
res.send("图片尺寸应该小于1M");
//删除图片
fs.unlink(files.tupian.path);
return;
} var ttt = sd.format(new Date(), 'YYYYMMDDHHmmss');
var ran = parseInt(Math.random() * 89999 + 10000);
var extname = path.extname(files.tupian.name); var wenjianjia = fields.wenjianjia;
var oldpath = files.tupian.path ;
var newpath = path.normalize(__dirname + "/../uploads/" + wenjianjia + "/" + ttt + ran + extname);
fs.rename(oldpath,newpath,function(err){
if(err){
res.send("改名失败");
return;
}
res.send("成功");
});
});
return;
}

file.js

/**
* Created by Danny on 2015/9/22 16:32.
*/
var fs = require("fs"); //这个函数的callback中含有两个参数,一个是err
//另一个是存放所有文件夹名字的array。
exports.getAllAlbums = function(callback){
fs.readdir("./uploads",function(err,files){
if(err){
callback("没有找到uploads文件",null);
}
var allAlbums = [];
(function iterator(i){
if(i == files.length){
//遍历结束,这个线程执行完毕,
console.log(allAlbums);
callback(null,allAlbums);//这个线程执行完毕调用回调函数。
return;
}
fs.stat("./uploads/" + files[i],function(err,stats){
if(err){
callback("找不到文件" + files[i] , null);
}
if(stats.isDirectory()){
allAlbums.push(files[i]);
}
iterator(i + 1);
});
})(0);
});
} //通过文件名,得到所有图片
exports.getAllImagesByAlbumName = function(albumName,callback){
fs.readdir("./uploads/" + albumName,function(err,files){
if(err){
callback("没有找到uploads文件",null);
return;
}
var allImages = [];
(function iterator(i){
if(i == files.length){
//遍历结束
console.log(allImages);
callback(null,allImages);
return;
}
fs.stat("./uploads/" + albumName + "/" + files[i],function(err,stats){
if(err){
callback("找不到文件" + files[i] , null);
return;
}
if(stats.isFile()){
allImages.push(files[i]);
}
iterator(i + 1);
});
})(0);
});
}

albm.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">
<title>小小相册</title>
<link href="/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.row h4{
text-align: center;
}
</style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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> <!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="/">全部相册<span class="sr-only">(current)</span></a></li>
<li><a href="/up">上传</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav> <div class="container">
<ol class="breadcrumb">
<li><a href="/">全部相册</a></li>
<li class="active"><%=albumname%></li>
</ol> <div class="row">
<% for(var i = 0 ; i < images.length ; i++){ %>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="<%=images[i]%>" alt="...">
</a>
<h4> </h4>
</div>
<%}%>
</div>
</div> <script src="/js/jquery-1.11.3.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</body>
</html>

err.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">
<title>小小相册</title>
<link href="/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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> <!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">全部相册<span class="sr-only">(current)</span></a></li>
<li><a href="#">上传</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav> <div class="container">
<img src="/images/404.jpg" alt=""/>
</div> <script src="/js/jquery-1.11.3.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</body>
</html>

up.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">
<title>小小相册</title>
<link href="/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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> <!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">全部相册<span class="sr-only">(current)</span></a></li>
<li><a href="#">上传</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav> <div class="container">
<div class="row">
<form style="width:40%;" method="post" action="#" enctype="multipart/form-data">
<div class="form-group">
<label for="exampleInputEmail1">选择文件夹</label>
<select class="form-control" name="wenjianjia">
<% for(var i = 0 ; i < albums.length ; i++){%>
<option><%= albums[i] %></option>
<%}%>
</select>
</div> <div class="form-group">
<label for="exampleInputFile">选择图片</label>
<p>尺寸小于2M</p>
<input type="file" id="exampleInputFile" name="tupian">
</div> <button type="submit" class="btn btn-default">上传</button>
</form>
</div>
</div> <script src="/js/jquery-1.11.3.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</body>
</html>

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">
<title>小小相册</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.row h4{
text-align: center;
}
</style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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> <!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="/">全部相册<span class="sr-only">(current)</span></a></li>
<li><a href="/up">上传</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav> <div class="container">
<div class="row">
<% for(var i = 0 ; i < albums.length ; i++){ %>
<div class="col-xs-6 col-md-3">
<a href="<%= albums[i] %>" class="thumbnail">
<img src="data:images/wjj.jpg" alt="...">
</a>
<h4><%= albums[i] %></h4>
</div>
<% } %>
</div>
</div> <script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

jad.js

node11---相册的更多相关文章

  1. 三分钟学会用 js + css3 打造酷炫3D相册

    之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册 如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的j ...

  2. 使用CSS3实现一个3D相册

    CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此 第一篇主要列出了一些常用或经典的CSS3技巧和方法:第二篇是一 ...

  3. Android 获取系统相册中的所有图片

    Android 提供了API可获取到系统相册中的一些信息,主要还是通过ContentProvider 来获取想要的内容. 代码很简单,只要熟悉ContentProvider 就可以了. public ...

  4. Html 制作相册

    本文主要讲述采用Html5+jQuery+CSS 制作相册的小小记录. 主要功能点: Html5进行布局 调用jQuery(借用官网的一句话:The Write Less, Do More)极大的简化 ...

  5. CSS3学习总结——实现瀑布流布局与无限加载图片相册

    首先给大家看一下瀑布流布局与无限加载图片相册效果图: 一.pic1.html页面代码如下: <!DOCTYPE html> <html> <head> <me ...

  6. 大朋展翅 html5上传图片(三)一解决部分手机拍相册批量上传图片转向问题

    在经过前面的改进之后本来以为已经没有问题了,但经过我们神通广大的测试的测试,发现相册中的图片在上传时也会发生转向问题.既然前面都解决了拍照转向的问题,那么相册中图片的上传也容易解决.修改一下需要旋转图 ...

  7. Swift—调用系统相册和相机

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 24.0px Menlo; color: #000000 } p.p2 { margin: 0.0px 0. ...

  8. iOS中怎么存储照片到自定义相册

    在市场上主流App中,大多数App都具有存储图片到自己App的相册中.苹果提供的方法只能存储图片到系统相册,下面讲一下怎么实现: 实现思路:  1.对系统相册进行操作的前提必须导入#import &l ...

  9. php相册功能实现(包含php图片上传,后台管理,浏览和删除)教程例子

    相册功能实现(包含php图片上传,后台管理,浏览和删除)教程例子包括五个部分: 一.相册首页 <html> <head> <meta charset="utf- ...

  10. HTML5+CSS3实现图片可倾斜摆放的动画相册效果

    先看看效果:其中鼠标悬浮在图片上会有动态效果图 直接上代码: css文件 @CHARSET "UTF-8"; *{ padding:0px; margin:0px; } div{ ...

随机推荐

  1. EntityFramework 找不到方法:“Void System.Data.Entity.DbModelBuilder.RegisterEntityType

    问题原因,EF当前版本没有该方法,将EF版本升级即可. 1.packages.config <package id="EntityFramework" version=&qu ...

  2. Docker+ELK搭建

    换了个运行环境,重新搭建一套公司本地内部的ELK,之前也搭过(可访问:https://yanganlin.com/31.html),最近做什么事情都想用Docker,这次也用Docker,还算顺利,没 ...

  3. ROS安装教程

    对于ROS的安装,在它的官方网站: http://wiki.ros.org/ROS/Installation 中也有详细说明.但是对于像博主这样先天英语发育不全的人来说,直接看官网还是有点困难的. 所 ...

  4. Js radio

    <input type="radio" name="sex" value="1" />男 <input type=&quo ...

  5. Windows下Java JDK安装和环境变量配置

    [Java攻城狮学习路线](http://www.cnblogs.com/apollospotatolikett/p/8665123.html 1.JDK下载 下载地址:http://www.orac ...

  6. C语言整数类型在X86和X64下的字节大小

    C声明 32位机器(X86) 64位机器(X64) char 1 1 short int 2 2 int 4 4 long int 4 8 long long int 8 8 char * 4 8 f ...

  7. 搭建svn服务器(ubuntu)

    ubuntu搭建svn服务器 环境:ubuntu 12.04.5 apt-get install subversion 找个目录作为svn的仓库 mkdir svn svnadmin create s ...

  8. 大数据之R语言速成与实战

    什么是R语言? R语言由新西兰奥克兰大学的Ross Ihaka和Robert Gentleman两人共同发明.其词法和语法分别源自Scheme和S语言. R定义:一个能够自有有效的用于统计计算和绘图的 ...

  9. IOS - 总结(网络状态变更)

    - (void)initNetworkMonitor { NSURL *baseURL = [NSURL URLWithString:@"http://www.baidu.com/" ...

  10. sdoi2013 spring(hash+容斥)

    大体思路是先求出来\(f[i]\)代表有至少\(i\)个位置相同的点对数. 然后就已经没什么好害怕的了(跟BZOJ3622一样) 然后这个\(f[i\)]怎么求呢? 最无脑的方法就是枚举位置,然后\( ...