入门,高手见笑

表单数据一种是get方式, 另一种是post 方式

1.get方式

对于get方式,node处理起来非常简单

如以下代码:

var urlParsed = url.parse(request.url);
var getData = querystring.parse(urlParsed.query);
//getData 为object类型 同名表单为array

get返回结果:

{
name: "blue5tar",
hobby:["read", "surfing"]
}

2. post方式

post方式处理起来比较麻烦,但是有了node-formidable 这个module 我们就省事多了

使用npm安装 node-formidable

npm install formidable

formidable 使用方法

formidable = require("formidable"); //载入 formidable

var form = new formidable.IncomingForm();
var post = {},
file = {};
form.uploadDir = '/tmp'; //文件上传 临时文件存放路径 form
.on('error', function(err) {
console.log(err); //各种错误
})
//POST 普通数据 不包含文件 field 表单name value 表单value
.on('field', function(field, value) {
if (form.type == 'multipart') { //有文件上传时 enctype="multipart/form-data"
if (field in post) { //同名表单 checkbox 返回array 同get处理
if (util.isArray(post[field]) === false) {
post[field] = [post[field]];
}
post[field].push(value);
return;
}
}
post[field] = value;
})
.on('file', function(field, file) { //上传文件
file[field] = file;
})
.on('end', function() {
fn(); //解析完毕 做其他work
});
form.parse(request); //解析request对象

post方式有个bug

当form 有enctype=“multipart/form-data” 和没有 enctype=“multipart/form-data” 时 同名表单处理的方式不一样。
有 enctype=“multipart/form-data” 时 同名表单会被最后一个value覆盖,
没有 enctype="multipart/form-data"时,同get一样 会返回一个array

所以, 在 'field’事件时,对form.type进行不同处理 , 同名表单都返回array

还有一个问题,上传文件时 如果不选择文件 也会在临时目录生成空的临时文件, 解决办法:
修改 formidable 模块 lib/incoming_form.js handlePart方法 在183行处添加:

if (part.filename == "") {
return;
}

上传文件返回的结构如下:

{
size: 40635, //文件大小
path: '/tmp/f0423db2bf874499423ce409e2f222f4', //临时文件路径
name: 'arrow.png', //文件名称
type: 'image/png', //文件 mime
lastModifiedDate: Sun, 11 Mar 2012 07:19:44 GMT,
_writeStream:
{ path: '/tmp/f0423db2bf874499423ce409e2f222f4',
fd: 7,
writable: false,
flags: 'w',
encoding: 'binary',
mode: 438,
bytesWritten: 40635,
busy: false,
_queue: [],
drainable: true },
length: [Getter], //同size
filename: [Getter], //同name
mime: [Getter] //同type
}

文件上传到临时文件目录下,我们还要将临时文件, 移到我们的上传目录中

fs.rename(file.path, global.appConfig.uploadDir + '/' + file.filename);

有不对的地方,欢迎拍砖。

Links:

  1. 关于POST文件上传原理 看这里: http://club.cnodejs.org/topic/4f16442ccae1f4aa270010ad
  2. 关于node-formidable详解 看这里: http://club.cnodejs.org/topic/4f16442ccae1f4aa2700104d

[转] Form 表单数据处理 简单教程 formidable 使用心得的更多相关文章

  1. javaWeb 中前端Form表单数据处理(手动拼json)

    在前端我们会用到最多的就是form表单提交数据,在form表单中有很多都是自动将数据传到后台,然后通过实体来接受的,但是有的时候我们就是需要在前端就拿到这个Form表单的数据,这是我们就可以自己讲数据 ...

  2. Javascript和Java获取各种form表单信息的简单实例

    大家都知道我们在提交form的时候用了多种input表单.可是不是每一种input表单都是很简单的用Document.getElementById的方式就可以获取到的.有一些组合的form类似于che ...

  3. iframe和form表单的target应用简单例子

    iframe和form表单的target属性   Problem: 刷新主页面中的其中一个iframe,其他内容不变 Solution: main.jsp <body onload=" ...

  4. 标签form表单里的属性简单介绍了一下

    <form id="form1" name="form1" method="post" action=""> ...

  5. 仿 ELEMENTUI 实现一个简单的 Form 表单

    原文:仿 ElmentUI 实现一个 Form 表单 一.目标 ElementUI 中 Form 组件主要有以下 功能 / 模块: Form FormItem Input 表单验证 在这套组件中,有 ...

  6. jQuery Form 表单提交插件----Form 简介,官方文档,官方下载地址

     一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxF ...

  7. input file 在开发中遇到的问题 类似ajax form表单提交 input file中的文件

    最近在做项目的过程中遇到个问题,在这里做个记录防止日后忘记 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为 ...

  8. ajax form表单提交 input file中的文件

    ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...

  9. Django中三种方式写form表单

    除了在html中自己手写form表单外,django还可以通过 继承django.forms.Form 或django.forms.ModelForm两个类来自动生成form表单,下面依次利用三种方式 ...

随机推荐

  1. Linux中Grep常用的15个例子【转】

    转自:https://www.aliyun.com/jiaocheng/1390860.html?spm=5176.100033.1.9.6a1e41e8Pdjynm 摘要:Grep命令主要用于从文件 ...

  2. linux shell 进阶篇、shell脚本编程-创建函数

    使用函数 #!/bin/bash # testing the script function myfun { echo "This is an example of a function&q ...

  3. 设计模式C++学习笔记之一(Strategy策略模式)

    无意中,从网上下到一本电子书<24种设计模式介绍与6大设计原则>,很好奇这里有24种设计模式,印象中GOF写的<设计模式>(Design Patterns),好像只有23种吧. ...

  4. vc++基础班[27]---实现一个简单的任务管理器

      因为任务管理器中涉及到进程的枚举操作,所以把两节课的知识点合并到一起来讲!   ①.设计界面.以及列表控件变量的绑定: ②.列表控件样式的指定: m_TaskList.SetExtendedSty ...

  5. percona mysql server5.7基于gtid的主从复制

    配置mysql基于gtid主从复制架构 一.二进制安装mysql [root@node5 data]# --Linux.x86_64.ssl101.tar.gz [root@node5 data]# ...

  6. 4-HTML Computer Code Elements

    HTML Computer Code Elements Tag Description <code> Defines programming code <kbd> Define ...

  7. socket原理-基于UDP的套接字-基于TCP实现远程命令-粘包

  8. ios NSTimer的强引用问题

    在一个controller中,使用 NSURLSessionDataTask *dataTask = [[NSURLSession sharedSession] dataTaskWithRequest ...

  9. vue-cli3初尝试之路径别名配置

    let path = require('path') function resolve(dir) { return path.join(__dirname, dir) } module.exports ...

  10. 浅谈java中bigInteger用法

    1.赋值: BigInteger a=new BigInteger("1"); BigInteger b=BigInteger.valueOf(1); 2.运算: ① add(); ...