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

时间: 2024-12-25 13:32:34

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

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

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

1. 一个完整的博客怎么能缺少图片呢,目前上传文件的方法有三种: (1)使用Express自带的文件上传功能,不涉及数据库. (2)使用Formidable外部模块,不涉及数据库. (3)上传到MongoDB,涉及到数据库. 可以看出,第一种方式最简单,Express通过bodyParser()解析请求体,因此我们可以使用bodyParser()来实现文件的上传功能. 2.实现过程 2.1 首先打开header.ejs,在<li><a href="/post" tit

基于Java的一个简单的文件上传下载功能

最近在公司给客户端做接口,有一个图片上传和文件下载的功能,本来想用Struts来做文件上传下载,但是看了下公司好像没有这个配置,然后看了下同事的代码,才发现原来Apache也可以简单的实现文件上传下载. 首先引入commons-io-2.2.jar FileUtils为我们提供了很多对文件的操作的方法,比如上传整个文件夹的文件.上传单个文件等 然后请看代码下载: public static void uploadFile(String targetDirectory,String targetF

nodejs 简单http 文件上传demo

// 这是一个简单的Node HTTP,能处理当前目录的文件 // 并能实现良种特殊的URL用于测试 // 用http://localhost:8000 或http://127.0.0.1:8000 连接这个服务器 // 首先,加载所有要用的模块 var http = require('http'); // HTTP服务器API var fs = require('fs'); // 文件系统API var server = new http.Server(); // 创建新的HTTP服务器 va

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

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

Node.js入门教程——如何实现文件上传功能

作者:zhanhailiang 日期:2014-11-16 本文将介绍如何使用Node.js实现文件上传功能. 1. 初始化项目信息:npm init [root@~/wade/nodejs/nodejs-upload-image-demo]# npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to gu

Node.js新手教程——怎样实现文件上传功能

作者:zhanhailiang 日期:2014-11-16 本文将介绍怎样使用Node.js实现文件上传功能. 1. 初始化项目信息:npm init [root@~/wade/nodejs/nodejs-upload-image-demo]# npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to gu

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

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

使用jsp/servlet简单实现文件上传与下载

使用JSP/Servlet简单实现文件上传与下载 通过学习黑马jsp教学视频,我学会了使用jsp与servlet简单地实现web的文件的上传与下载,首先感谢黑马.好了,下面来简单了解如何通过使用jsp与servlet实现文件上传与下载. 在写代码之前,我们需要导入两个额外的jar包,一个是common-io-2.2.jar,另一个是commons-fileupload-1.3.1.jar,将这个两个jar 包导入WEB-INF/lib目录里. 首先,想要在web端即网页上实现文件上传,必须要提供