nodejs 实现简单的文件上传功能
首先需要大家看一下目录结构，然后开始一点开始我们的小demo。
文件上传总计分为三种方式：
1.通过flash,activeX等第三方插件实现文件上传功能。
2.通过html的form标签实现文件上传功能，优点：浏览器兼容好。
3.通过xhr level2的异步请求，可以百度formData对象。
这里使用2做个练习。
node插件请看下package.json文件
{
"name": "upload",
"version": "0.1.0",
"description": "upload demo",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "iwang",
"license": "ISC",
"dependencies": {
"body-parser": "^1.15.2",
"connect-multiparty": "^2.0.0",
"express": "^4.14.0"
}
}
dependencies中就是这次demo的依赖插件。我用的node.js是4.4.4版本的，大家可以把上面代码替换到你的package.json文件中，执行npm install 可以自动安装demo需要的三个依赖插件。
app.js
/**
* Created by iwang on 2017/1/15.
*/
//express使用的是@4版本的。
var express = require('express');
//form表单需要的中间件。
var mutipart= require('connect-multiparty'); var mutipartMiddeware = mutipart();
var app = express();
//下面会修改临时文件的储存位置，如过没有会默认储存别的地方，这里不在详细描述,这个修改临时文件储存的位置 我在百度里查找了三四个小时才找到这个方法，不得不说nodejs真难学。
//所以在这里留下我的学习记录，以备以后翻阅。
app.use(mutipart({uploadDir:'./linshi'}));
//设置http服务监听的端口号。
app.set('port',process.env.PORT || 3000);
app.listen(app.get('port'),function () {
console.log("Express started on http://localhost:"+app.get('port')+'; press Ctrl-C to terminate.');
});
//浏览器访问localhost会输出一个html文件
app.get('/',function (req,res) {
res.type('text/html');
res.sendfile('public/index.html') });
//这里用来玩，express框架路由功能写的，与上传文件没没有关系。
app.get('/about',function (req,res) {
res.type('text/plain');
res.send('Travel about');
});
//这里就是接受form表单请求的接口路径，请求方式为post。
app.post('/upload',mutipartMiddeware,function (req,res) {
//这里打印可以看到接收到文件的信息。
console.log(req.files);
/*//do something
* 成功接受到浏览器传来的文件。我们可以在这里写对文件的一系列操作。例如重命名，修改文件储存路径 。等等。
*
*
* */ //给浏览器返回一个成功提示。
res.send('upload success!');
});
public/index.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="/upload" enctype="multipart/form-data" method="post">
<p>附件：<input type="file" name="myfile" style=""></p>
<p>
<input type="submit">
</p>
</form>
</body>
</html>
浏览器地址访问index.html
选取文件：我选择了一个timg.jpg的文件
点击提交后跳转了页面，提示成功上传
我们看一下，linshi名字的问价加下是否已经存在我们上传的文件，下面的图证明文件已经储存在了upload_demo/linshi下面,图片名字被改成了一个临时命名。
我们可以在app.js中写代码处理我们的图片文件了。
demo要点：
1.首先安装好nodejs 我这里的版本为4.4.4。
2.创建一个英文命名的文件。手动，或使用npm init创建一个package.json文件。把上述package.json的文件内容替换掉你创建的package.json文件内容。
3.使用npm install 安装package.json中的插件。自动生成了node_modules文件。我们的依赖插件都放在了这里。
4.编写好我们的app.js index.html文件。或者复制上述两处代码。
5.命令行执行node app.js。
6.浏览器访问localhost:3000，即可出现我们的简单的上传页面了。
我的demo文件百度云下载地址：
链接：http://pan.baidu.com/s/1c2rDCQG 密码：nrml
nodejs 实现简单的文件上传功能的更多相关文章
- java 网络编程之TCP通信和简单的文件上传功能
*/ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hl ...
- 如何用php实现简单的文件上传功能？（带图解）
如图所示:点击浏览出现选择文件的对话框,将所选文件上传到保存文件的文件. 关键点:文件上传的图解: 代码: <!DOCTYPE html> <html> <head&g ...
- Python 简单的文件上传功能
简单地在程序当前目录下上传一张图片: 1.png 到程序的 yuan 文件夹下.这里使用的是固定参数 post,如果后期有需求,可以增加判断来更加完善程序. # server 端 import soc ...
- spring mvc 3.0 实现文件上传功能
http://club.jledu.gov.cn/?uid-5282-action-viewspace-itemid-188672 —————————————————————————————————— ...
- MVC5：使用Ajax和HTML5实现文件上传功能
引言 在实际编程中,经常遇到实现文件上传并显示上传进度的功能,基于此目的,本文就为大家介绍不使用flash 或任何上传文件的插件来实现带有进度显示的文件上传功能. 基本功能:实现带有进度条的文件上传功 ...
- 使用jsp/servlet简单实现文件上传与下载
使用JSP/Servlet简单实现文件上传与下载 通过学习黑马jsp教学视频,我学会了使用jsp与servlet简单地实现web的文件的上传与下载,首先感谢黑马.好了,下面来简单了解如何通过使用 ...
- Spring 文件上传功能
本篇文章,我们要来做一个Spring的文件上传功能: 1. 创建一个Maven的web工程,然后配置pom.xml文件,增加依赖: <dependency> <groupId> ...
- Node.js新手教程——怎样实现文件上传功能
作者:zhanhailiang 日期:2014-11-16 本文将介绍怎样使用Node.js实现文件上传功能. 1. 初始化项目信息:npm init [root@~/wade/nodejs/node ...
- jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能
Ajax file upload plugin是一个功能强大的文件上传jQuery插件,可自定义链接.或其它元素庖代传统的file表单上传结果,可实现Ajax动态提示文件上传 过程,同时支撑多文 ...
随机推荐
- js中getByClass()函数
js中getByClass()函数进化史 对于js来说,我想每一个刚接触它的人都应该会抱怨:为什么没有一个通过class来获取元素的方法.尽管现在高版本的浏览器已经支持getElementsByCla ...
- unity3D学习序幕
目前,我所在的公司不适合我长久发展,在一好友的提示下,我决定以unity3D程序员的身份,返回我2013年工作过的那家公司.关于unity3D,除了几年前一点模糊的记忆,其他都是一篇空白.今年年初我买 ...
- 结构-行为-样式-Javascript笔记
一.console.dir()可以显示一个对象所有的属性和方法. 二.递归遍历一个数据集合: A.数据: { "menu": [ { "menuId&q ...
- 从Chrome源码看浏览器如何构建DOM树
.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto } p { font-size: 1 ...
- 【使用教程】论Windows下必备的抓包工具Fiddler2如何安装证书（查看Https）
一.写在前面 好久没更新博客了,最近也是忙着年前的一些事情,所以一直没来得及弄一些有价值的东西,还是来冒个泡.随着苹果公司要求的2017年开始上架审核必须是Https,而原本Http的上架需要提交强烈 ...
- iOS开发-OC语言 (二)类的设计
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 24.0px Helvetica } p.p2 { margin: 0.0px 0.0px 0.0px 0. ...
- HTML5之Audio音频标签学习
HTML5中的新元素标签 src:音频文件路径. autobuffer:设置是否在页面加载时自动缓冲音频. autoplay:设置音频是否自动播放. loop:设置音频是否要循环播放. control ...
- 【CSS学习笔记】初始化CSS后，写li，并利用背景图片，来完成li小图标的效果，且达到个浏览器兼容
第一种情况 /*当标题前的图标时单独的一个点儿或者方块或者其他类似图标时,定义背景图background要放在<li>里. 在<li>中设置背景图片的尺寸,地址,不重复, ...
- pythong下的unittest框架
今天有空测试了下TestSuit的执行顺序,用discover遍历过来的tests,用runner执行. 只会识别继承了unittest的测试类中的测试用例.按setup和teardown的顺序进行执 ...
- [HMLY]11.iOS函数式编程的实现&&响应式编程概念
简介 本篇主要回顾一下--iOS函数式编程 && 响应式编程概念 ,如何一步步实现函数式编程的过程,对阅读Masonry && SnapKit源码有一定的帮助. 作为一 ...