废话不多说，直接上代码：

前端页面：

<!DOCTYPE html>
<html>
<head>
<link rel=’stylesheet’ href=’/stylesheets/style.css’ />
</head>
<body>
<h5>信息:<%= locals.title %></h5>
<p>Welcome to <%= title %></p>

<img src='./images/<%= locals.imginfo %>' width='200'/>

<h2><%= locals.username %></h2>

<form method="post" enctype="multipart/form-data" action="/file-upload">
<input type="text" name="username">
<input type="password" name="password">
<input type="file" name="thumbnail">
<input type="submit">
</form>
</body>
</html>

后端处理：

//formidable
router.get('/formidable', function(req, res, next) {
res.render('formidable', {
title: 'formidable'
});
});

router.post('/file-upload', function(req, res, next) {
console.log('开始文件上传....');
var form = new formidable.IncomingForm();
//设置编辑
form.encoding = 'utf-8';
//设置文件存储路径
form.uploadDir = "./public/images/";
//保留后缀
form.keepExtensions = true;
//设置单文件大小限制
form.maxFieldsSize = 2 * 1024 * 1024;
//form.maxFields = 1000; 设置所以文件的大小总和

form.parse(req, function(err, fields, files) {
//console.log(fields);
// var originName=files.thumbnail.name;
console.log(files.thumbnail.path);
console.log('文件名:' + files.thumbnail.name);

//随机文件名调用
var t = (new Date()).getTime();
//生成随机数
var ran = parseInt(Math.random() * 8999 + 10000);
//拿到扩展名
var extname = path.extname(files.thumbnail.name);

var username = fields.username;
var password = fields.password;

//文本测试
console.log('name:' + username);
console.log('pass:' + password);

var oldpath = path.normalize(files.thumbnail.path);

//新的路径
//随机文件名调用
// let newfilename=t+ran+extname;
var newfilename = files.thumbnail.name;

//插入数据库
var img = new Img({
username: username,
newfilename: newfilename
})
img.save(function(err) {
if(err) {
console.log(err);
//res.send(400);
} else {
console.log("信息提交成功!");
res.render('formidable', { title: '文件上传成功:', imginfo: newfilename,name:username
});
}
});

var newpath = './public/images/' + newfilename;
console.warn('oldpath:' + oldpath + ' newpath:' + newpath);
fs.rename(oldpath, newpath, function(err) {
if(err) {
console.error("改名失败" + err);
}

//随机文件名调用
//res.render('formidable', { title: '文件上传成功:', imginfo: newfilename,name:username});

//原文件名
//res.render('formidable', { title: '文件上传成功:', imginfo: originName,name:username});
});

//res.end(util.inspect({fields: fields, files: files}));
});

});

nodejs formidable混合表单提交的更多相关文章

  1. nodejs学习之表单提交(1)

    nodejs作为一门后端语言,接触的最多的是它的框架,但是它本身的api我觉得更是非学不可,所有才有了这篇文章 表单提交是最基本的也是最实用的入门实例 HTML: <!DOCTYPE html& ...

  2. php框架中的phalcon框架的安装，及初步认识，从表单提交简单的数据到数据库中

    php框架中的phalcon框架的安装,及初步认识,从表单提交简单的数据到数据库中 1.phalcon框架的安装: phalcon框架在windows本地安装可以利用wamp软件,安装之后可以查看对应 ...

  3. 如何用elementui去实现图片上传和表单提交，用axios的post方法

    下面是在vue搭建的脚手架项目中的组件component文件夹下面的upload.vue文件中的内容 <!--这个组件主要用来研究upload这个elementui的上传插件组件--> & ...

  4. 混合表单文件上传到数据库（基于TOMCAT）

    在实际的开发中在实现文件上传的同时肯定还有其他信息需要保存到数据库,就像混合表单在上传完毕之后需要将提交的基本信息插入数据库. 在这个demo中需要用到这个架包来帮助实现 1.定义一个公共类实现文件上 ...

  5. node07---post请求、表单提交、文件上传

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. from表单提交数据之后，后台对象接受不到值

    如果SSH框架下,前段页面通过from表单提交数据之后,在后台对象显示空值,也就是接收不到值得情况下.首先保证前段输入框有值,这个可以在提交的时候用jQuery的id或者name选择器alert弹出测 ...

  7. 不使用Ajax，如何实现表单提交不刷新页面

    不使用Ajax,如何实现表单提交不刷新页面? 目前,我想到的是使用<iframe>,如果有其他的方式,后续再补. 举个栗子: 在表单上传文件的时候必须设置enctype="mul ...

  8. golang-web框架revel一个表单提交的总结

    这里要介绍好是revel框架的表单post提交的列子,主要是用于入门学习,和一些知识点的讲解: 首先: 来了解一个问题那就是重复提交表单,做过form表单提交的同学都知道,如果表单提交后不做处理,那么 ...

  9. 关于我们经常用到的form表单提交

    工作中遇到了太多太多的表单提交问题,曾经学过一个HTML的表单提交给 另外一个HTML页面,对于后台怎么获取有点想不起来了. 今天便做了几个实验,提交订单到后台,来掩饰后台如何接受表单内容: 实验 一 ...

随机推荐

  1. Python3 Tkinter-Scale

    1.创建 from tkinter import * root=Tk() Scale(root).pack() root.mainloop() 2.参数 from tkinter import * r ...

  2. Spring 3整合Quartz 2实现定时任务：动态添加任务

    先展示一下后台管理定时任务效果图: 1.新增任务页面: 2.列表页(实现任务的禁用启用) 3.数据库脚本: -- ------------------------------ Table struct ...

  3. Alphabetic Removals(模拟水题)

    You are given a string ss consisting of nn lowercase Latin letters. Polycarp wants to remove exactly ...

  4. Thunder团队第六周 - Scrum会议1

    Scrum会议1 小组名称:Thunder 项目名称:i阅app Scrum Master:王航 工作照片: 参会成员: 王航(Master):http://www.cnblogs.com/wangh ...

  5. 文件异步上传-ajaxFileUpload

    $.ajaxFileUpload是一个jquery插件 文章:jQuery插件之ajaxFileUpload

  6. 共享程序集GAC

    原文标题: 原文地址:https://www.cnblogs.com/1996V/p/9037603.html 共享程序集GAC 我上面说了这么多有关CLR加载程序集的细节和规则,事实上,类似于msc ...

  7. Ligerui首页的快速搭建

    一.目录 1.多层架构+MVC+EF+AUTOFAC+AUTOMAPPER: 2.MVC中验证码的实现(经常用,记录备用) 3.Ligerui首页的快速搭建 4.Ligerui Grid组件--学生信 ...

  8. BAT批处理（六）

    字符串处理 批处理有着具有非常强大的字符串处理能力,其功能绝不低于C语言里面的字符串函数集.批处理中可实现的字符串处理功能有:截取字符串内容.替换字符串特定字段.合并字符串.扩充字符串等功能.下面对这 ...

  9. phpcms 模型

  10. (转)centos6.5下Zabbix系列之Zabbix安装搭建及汉化

    最近在研究zabbix,在整理完成之后就有了写一下总结博客的想法,在我研究zabbix的时候给我很大帮助的是it你好,博客地址 http://itnihao.blog.51cto.com/他做的zab ...