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(‘/upload‘, function (req, res) {
        req.flash(‘success‘, ‘文件上传成功!‘);
        res.json({"result":{message:"文件上传成功!"}});
    });

html

<input type="file" id="photo">

<button id="upload">上传</button>

ajax

    /*上传文件*/
        $("#upload").click(function(){
            //do something
            var file = $("#photo")[0].files;
            //上次修改时间
            console.log("文件上次修改时间"+file[0].lastModifiedDate);
            //名称
            console.log("文件名称"+file[0].name);
            //大小 字节
            console.log("文件大小"+file[0].size);
            //类型
            console.log("文件类型"+file[0].type);
            //创建FormData对象
            var data = new FormData();
            //为FormData对象添加数据
            $.each(file, function(i, file) {
                data.append(‘upload_file‘, file);
            });
            $.ajax({
                data: data,
                url: ‘/upload‘,
                type:"post",
                dataType: ‘JSON‘,
                contentType: false,    //不可缺
                processData: false,    //不可缺
                success: function(data){
                    console.log(data);
                    alert("上传成功!");
                },
                error: function(err){
                    console.log(‘error: ‘ + err);
                }
            });
        })
时间: 12-26

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

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

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

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

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

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

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

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

jfinal初接触,一个简单的文件上传例子

写了个上传的小例子. 从jfinal官网下载jfinal-1.8_demo_for_jsp.zip 然后下载jfinal-1.8-lib.zip 按要求删掉该删除的,引入一些包,之后的项目结构: DemoConfig.java中配置路由,只留下了根路径: /** * 配置路由 */ public void configRoute(Routes me) { me.add("/", CommonController.class); //me.add("/blog", B

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

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

python写个简单的文件上传是有多难,要么那么复杂,要么各种,,,老子来写个简单的

def upload(url,params): ''' 上传文件到服务器,不适合大文件 @params url 你懂的 @params {"action":"xxx","@file","file_path"} 普通参数 key:value 文件key头部加@ ''' import os import urllib2 BOUNDARY = "0450de9528f040078csuxianbaozic06"

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

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

使用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端即网页上实现文件上传,必须要提供