一个简单的blog系统(三) 增加文件上传功能

1. 一个完整的博客怎么能缺少图片呢,目前上传文件的方法有三种:

  (1)使用Express自带的文件上传功能,不涉及数据库。

  (2)使用Formidable外部模块,不涉及数据库。

  (3)上传到MongoDB,涉及到数据库。

  可以看出,第一种方式最简单,Express通过bodyParser()解析请求体,因此我们可以使用bodyParser()来实现文件的上传功能。

2.实现过程

  2.1 首先打开header.ejs,在<li><a href="/post" title=‘发表‘>发表</a></li>,前面添加一行代码:

<li><a href="/upload" title="上传">上传</a></li>

  2.2 然后,打开index.js,在app.get(‘/logout‘)函数后添加如下代码:

 1 //上传文件页路由
 2 router.get(‘/upload‘, checkLogin);    //限定只有登录的用户才能上传文件
 3 router.get(‘/upload‘, function(req, res) {
 4     res.render(‘upload‘, {
 5         title: ‘文件上传‘,
 6         user: req.session.user,
 7         success: req.flash(‘success‘).toString(),
 8         error: req.flash(‘error‘).toString()
 9     });
10 });

  2.3 其次,我们在views文件夹下面新建upload.ejs,添加如下代码:

 1 <div class=‘container‘>
 2     <h2>文件上传</h2>
 3     <hr/>
 4     <form enctype="multipart/form-data" method="post" action="/upload" class="form-horizontal">
 5         <div class="form-group">
 6           <label for="file1">文件输入</label>
 7           <input type="file" name="file1">
 8        </div>
 9        <div class="form-group">
10           <label for="file1">文件输入</label>
11           <input type="file" name="file1">
12        </div>
13        <div class="form-group">
14           <label for="file1">文件输入</label>
15           <input type="file" name="file1">
16        </div>
17        <button type="submit" class="btn btn-primary">上传</button>
18    </form>
19 </div>

  2.4 然后,修改app.js,添加如下代码:

 1 var multer  = require(‘multer‘);
 2 // 文件上传插件
 3 var storage = multer.diskStorage({
 4   destination: function (req, file, cb) {
 5     cb(null, ‘./public/images/user‘)
 6   },
 7   filename: function (req, file, cb) {
 8     cb(null, file.fieldname + ‘-‘ + Date.now())
 9   }
10 });
11 app.use(multer({ storage: storage }).any());

  2.5 现在我们现在只是有了一个可以上传文件的表单而已,并不能上传文件,接下来我们添加对上传文件的支持。在 router.get(‘/upload‘) 后添加如下代码:

router.post(‘/upload‘, checkLogin);
router.post(‘/upload‘, function (req, res) {
  req.flash(‘success‘, ‘文件上传成功!‘);
  res.redirect(‘/upload‘);
});

  至此,我们就给博客添加了文件上传功能。

时间: 03-20

一个简单的blog系统(三) 增加文件上传功能的相关文章

Node.js 博客实例(三)增加文件上传功能

原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第三章 上传文件目前有三种方法: 使用 Express 自带的文件上传功能,不涉及数据库 使用 Formidable 外部模块,不涉及数据库 上传到 MongoDB ,涉及数据库 这里使用第一种,用户将文件上,存储于:blog/public/images/目录下. blog/views/header.ejs  在<span><a title="发表" href="

一个简单的jQuery插件ajaxfileupload实现ajax上传文件例子

页面代码:   <html>     <!-- 引入相关的js文件,相对路径  -->     <script type="text/javascript" src="js/jquery.js"></script>       <script type="text/javascript" src="js/ajaxfileupload.js"></script&g

nodejs 实现简单的文件上传功能

首先需要大家看一下目录结构,然后开始一点开始我们的小demo. 文件上传总计分为三种方式: 1.通过flash,activeX等第三方插件实现文件上传功能. 2.通过html的form标签实现文件上传功能,优点:浏览器兼容好. 3.通过xhr level2的异步请求,可以百度formData对象. 这里使用2做个练习. node插件请看下package.json文件 { "name": "upload", "version": "0.1

Node.js 博客实例(三)添加文件上传功能

原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第三章 上传文件眼下有三种方法: 使用 Express 自带的文件上传功能,不涉及数据库 使用 Formidable 外部模块,不涉及数据库 上传到 MongoDB ,涉及数据库 这里使用第一种,用户将文件上,存储于:blog/public/images/文件夹下. blog/views/header.ejs  在<span><a title="发表" href=&quo

nodejs+ajax实现简单的文件上传功能

app.js中引入express的第三方中间件multer实现文件上传功能. var multer = require('multer');//用express的第三方中间件 multer 实现文件上传功能. app.use(multer({//设置文件上传到的位置 dest: './public/images/upload', rename: function (fieldname, filename) { return filename; } })); 路由 app.post('/uploa

MVC中使用Ajax和HTML5实现文件上传功能

引言 在实际编程中,经常遇到实现文件上传并显示上传进度的功能,基于此目的,本文就为大家介绍不使用flash 或任何上传文件的插件来实现带有进度显示的文件上传功能. 基本功能:实现带有进度条的文件上传功能 高级功能:通过拖拽文件的操作实现多个文件上传功能 背景 HTML5提供了一种标准的访问本地文件的方法——File API规格说明,通过调用File API 能够访问文件信息,也可以利用客户端来验证上传文件的类型和大小是否规范. 该规格说明包含以下几个接口来使用文件: File接口:具有文件的“读

MVC5:使用Ajax和HTML5实现文件上传功能

引言 在实际编程中,经常遇到实现文件上传并显示上传进度的功能,基于此目的,本文就为大家介绍不使用flash 或任何上传文件的插件来实现带有进度显示的文件上传功能. 基本功能:实现带有进度条的文件上传功能 高级功能:通过拖拽文件的操作实现多个文件上传功能 背景 HTML5提供了一种标准的访问本地文件的方法--File API规格说明,通过调用File API 能够访问文件信息,也可以利用客户端来验证上传文件的类型和大小是否规范. 该规格说明包含以下几个接口来使用文件: File接口:具有文件的"读

使用Commons FileUpLoad组件实现文件上传功能

Commons 是Apache开放的源码组织的一个java子项目,该项目主要涉及一些开发中常用的模块,如文件上传,命令行处理,数据库连接池等.FileUpLoad就是其中的一个用于处理HTTP文件上传的子项目.Commons FileUpLoad组建具有以下几个特点: 1.使用简单:Commons FileUpLoad组件可以方便的嵌入JSP文件中,在JSP文件中仅编写少量代码就可完成文件上传功能,十分方便. 2.能够全程控制上传的内容:使用Commons FileUpLoad组件提供的对象及操

配置php.ini实现PHP文件上传功能

本文介绍了如何配置php.ini实现PHP文件上传功能.其中涉及到php.ini配置文件中的upload_tmp_dir.upload_max_filesize.post_max_size等选项,这些选项是文件上传成败的关键.我们以php.5.3.5的Windows版本为例说明. php.ini中文件上传功能配置选项说明 用文本工具(推荐EditPlus)打开php.ini 配置文件,查找 File Uploads ,在这个区域有以下3个选项: file_uploads = On 是否允许HTT