<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <form action="dopost" method="post" enctype="multipart/form-data">

        <p>

            姓名 ： <input type="text" name="name">

        </p>

        <p>

            性别 ：

             <input type="radio" name="sex" value="男">男

             <input type="radio" name="sex" value="女">女

        </p>

        <p>

            爱好：

            <input type="checkbox" name="hobby" value="睡觉" />睡觉

            <input type="checkbox" name="hobby" value="吃饭" />吃饭

            <input type="checkbox" name="hobby" value="足球" />足球

        </p>

        <p>

            图片：

            <input type="file" name="tupian" />

        </p>

        <p>

            <input type="submit" />

        </p>

    </form>

</body>

</html>
/**

 * poest提交表单

 */

var http = require("http");

var querystring = require("querystring");

//创建服务器

var server = http.createServer(function(req,res){//每次请求执行函数，外面的已经执行了。

    //如果你的访问地址是这个，并且请求类型是post

    if(req.url == "/dopost" && req.method.toLowerCase() == "post"){

        console.log("req.url:" + req.url);

        console.log("req.method:" + req.method);

        var alldata = "";

        //下面是post请求接收的一个公式，node为了追求极致，它是一个小段一个小段接收的。

        //接受了一小段，可能就给别人去服务了。防止一个过大的表单阻塞了整个进程,异步操作。

        req.addListener("data",function(chunk){

            alldata += chunk;

        });

        //全部传输完毕

        req.addListener("end",function(){

            var datastring = alldata.toString();

            res.end("success");

            //将datastring转为一个json对象

            var dataObj = querystring.parse(datastring);

            console.log(dataObj);

            console.log(dataObj.name);

            console.log(dataObj.sex);

        });

    }

});

server.listen(3000,"127.0.0.1");
三、post请求

1        var alldata = "";

2        //下面是post请求接收的一个公式

3        //node为了追求极致，它是一个小段一个小段接收的。

4        //接受了一小段，可能就给别人去服务了。防止一个过大的表单阻塞了整个进程

5        req.addListener("data",function(chunk){

6            alldata += chunk;

7        });

8        //全部传输完毕

9        req.addListener("end",function(){

10            console.log(alldata.toString());

11            res.end("success");

12        });

原生写POST处理，比较复杂，要写两个监听。文件上传业务比较难写。

所以，用第三方模块。formidable。

只要涉及文件上传，那么form标签要加一个属性：

1<form action="http://127.0.0.1/dopost" method="post" enctype="multipart/form-data">
/**

 * 文件上传，改变了表单提交方式。

 */

var http = require("http");

var formidable = require('formidable');

var util = require("util");

console.log("qqq");

//创建服务器

var server = http.createServer(function(req,res){

    //如果你的访问地址是这个，并且请求类型是post

       console.log("qqqqqqq");

    if(req.url == "/dopost" && req.method.toLowerCase() == "post"){

        var form = new formidable.IncomingForm();

        //设置文件上传存放地址

        form.uploadDir = "./uploads";

        //执行里面的回调函数的时候，表单已经全部接收完毕了。

        //姓名性别全在fields对象里面，files是文件

        form.parse(req, function(err, fields, files) {

            if(err){

                throw err;

            }

            console.log(fields);

            console.log(files);

            console.log(util.inspect({fields: fields, files: files}));

            //所有的文本域、单选框，都在fields存放；

            //所有的文件域，files

            res.writeHead(200, {'content-type': 'text/plain'});

            res.end("成功");

        });

    }

});

server.listen(3000);

文件上传并改名

/**

 * Created by Danny on 2015/9/20 15:35.

 */

var http = require("http");

var formidable = require('formidable');

var util = require("util");

var fs = require("fs");

var sd = require("silly-datetime");

var path = require("path");

//创建服务器

var server = http.createServer(function(req,res){

    //如果你的访问地址是这个，并且请求类型是post

    if(req.url == "/dopost" && req.method.toLowerCase() == "post"){

        //Creates a new incoming form.

        var form = new formidable.IncomingForm();

        //设置文件上传存放地址

        form.uploadDir = "./uploads";

        //执行里面的回调函数的时候，表单已经全部接收完毕了。

        form.parse(req, function(err, fields, files) {

            //if(err){

            //    throw err;

            //}

            //console.log(util.inspect({fields: fields, files: files}));

            //时间，使用了第三方模块，silly-datetime

            var ttt = sd.format(new Date(), 'YYYYMMDDHHmmss');

            var ran = parseInt(Math.random() * 89999 + 10000);

            var extname = path.extname(files.tupian.name);

            //执行改名

            var oldpath = __dirname + "/" + files.tupian.path;

            //新的路径由三个部分组成：时间戳、随机数、拓展名

            var newpath = __dirname + "/uploads/" + ttt + ran + extname;

            //改名

            fs.rename(oldpath,newpath,function(err){

                if(err){

                    throw Error("改名失败");

                }

                res.writeHead(200, {'content-type': 'text/plain'});

                res.end("成功");

            });

        });

    }else if(req.url == "/"){

        //呈递form.html页面

        fs.readFile("./form.html",function(err,data){

            res.writeHead(200, {'content-type': 'text/html'});

            res.end(data);

        })

    }else{

        res.writeHead(404, {'content-type': 'text/html'});

        res.end("404");

    }

});

server.listen(80,"192.168.41.36");

node07---post请求、表单提交、文件上传的更多相关文章

  1. 传统表单提交文件上传，以及FormData异步ajax上传文件

    传统的文件上传: 只用将form表单的entype修改成multipart/form-data,然后就可以进行文件上传,这种方式常用并且简单. 以下是另一种方式FormData,有时候我们需要ajax ...

  2. AJAX 表单提交 文件上传

    1. AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载 ...

  3. [原创]java WEB学习笔记49：文件上传基础，基于表单的文件上传,使用fileuoload 组件

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  4. Struts2文件上传（基于表单的文件上传）

    •Commons-FileUpload组件 –Commons是Apache开放源代码组织的一个Java子项目,其中的FileUpload是用来处理HTTP文件上传的子项目   •Commons-Fil ...

  5. Ajax提交Form表单及文件上传

    刚刚申请下来的博客,写得第一篇.有点小激动,本人以前是一名工业3D设计师突然有些变故做上了JavaWeb开发: 前几天,发现了一些小问题.我在写后台管理页面时,需要上传一张图片.于是我就用很普通的Fo ...

  6. ajax提交表单,支持文件上传

    当我们提交表单但是又不想要刷新页面的时候就可以考虑使用ajax来实现提交功能,但是这有个局限就是当有文件上传的时候是行不通的,下面借助于jquery.form可以很方便满足我们的需求.   1.表单写 ...

  7. 表单多文件上传样式美化 && 支持选中文件后删除相关项

    开发中会经常涉及到文件上传的需求,根据业务不同的需求,有不同的文件上传情况. 有简单的单文件上传,有多文件上传,因浏览器原生的文件上传样式及功能的支持度不算太高,很多时候我们会对样式进行美化,对功能进 ...

  8. Django的form表单之文件上传

    在生成input标签的时候可以指定input标签的类型为file类型 <!DOCTYPE html> <html lang="en"> <head&g ...

  9. php+form表单的文件上传

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. 2020最新Servlet+form表单实现文件上传(图片)

    servlet实现文件上传接受 这几天学了一点文件上传,有很多不会,在网查了许多博客,但是最新的没有,都比较久了 因为我是小白,版本更新了,以前的方法自己费了好久才弄懂,写个随笔方便以后查找 代码奉上 ...

随机推荐

  1. 【codeforces 746E】Numbers Exchange

    [题目链接]:http://codeforces.com/problemset/problem/746/E [题意] 你有n张卡片,上面写着不同的数字; 然后另外一个人有m张上面写着不同的数字的卡片: ...

  2. [using_microsoft_infopath_2010]Chapter1 介绍InfoPath2010

    本章提要 1.列举对于就SharePoint2010来说使用InfoPath2010的好处 2.使用Office后台函数创建InfoPath表单 3.使用InfoPath接口 4.创建基于XML的文件 ...

  3. [Hyperapp] Interact with the State Object through Hyperapp Action functions

    Hyperapp is an ultra lightweight (1kb), minimal, functional, JavaScript library for building UIs. It ...

  4. Android实战简易教程-第十三枪（五大布局研究）

    我们知道Android系统应用程序通常是由多个Activity组成,而这些Activity以视图的形式展如今我们面前, 视图都是由一个一个的组件构成的. 组件就是我们常见的Button.TextEdi ...

  5. java.lang.ClassNotFoundException: org.jaxen.JaxenException

    java.lang.ClassNotFoundException: org.jaxen.JaxenException java.lang.ClassNotFoundException: org.jax ...

  6. HTML5图片上传预览

    HTML5实现图片的上传预览,需要使用FileReader对象. FileReader: The FileReader object lets web applications asynchronou ...

  7. javascript 获取指定范围随机数

    <script type="text/javascript"> function GetRandomNum(Min,Max){ var Range = Max - Mi ...

  8. CoreData 从入门到精通（五）CoreData 和 TableView 结合

    我们知道 CoreData 里存储的是具有相同结构的一系列数据的集合,TableView 正好是用列表来展示一系列具有相同结构的数据集合的.所以,要是 CoreData 和 TableView 能结合 ...

  9. jsp页面String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";作用！！！！！

    转自:https://blog.csdn.net/kiwangruikyo/article/details/81130311 <%String path = request.getContext ...

  10. （转载）RecyclerView之ItemDecoration由浅入深

    RecyclerView之ItemDecoration由浅入深 作者 小武站台 关注 2016.09.19 18:20 字数 1155 阅读 10480评论 15喜欢 91赞赏 3 译文的GitHub ...