node.js+express+jade系列六:图片的上传
安装npm install formidable
先把文件上传到临时文件夹,再通过fs重命名移动到指定的目录即可
fs.rename即重命名,但是fs.rename不能夸磁盘移动文件,所以我们需要指定上传的临时目录要和最终目录在同一磁盘下
前段请求
方法1:使用form标签和submit提交
form(action='/uploadImg', method="post", enctype="multipart/form-data" )
input(type="file", id="file1", name="file1")
br
button(type="submit", id="bt1", name="bt1") upload
方法2:ajax,post提交
input(type="file", id="file1", name="file1")
button(id="upload", name="upload") submit
javascript方法
$("#upload").click(function(){
var data = new FormData();
var files = $("#file1")[0].files;
if(files){
data.append("file", files[0]);
}
$.ajax({
type: 'post',
dataType: 'json',
data : data,
contentType: false,
processData: false,
success : function () {}
}
上传实现方法:form解析后的files是个对象,所以可以实现多文件上传
tool.uploadImg =function(req, res){
var fs = require('fs');
var formidable = require("formidable");
var form = new formidable.IncomingForm();
form.uploadDir = "./public/upload/temp/";//改变临时目录
form.parse(req, function(error, fields, files){
for(var key in files){
var file = files[key];
var fName = (new Date()).getTime();
switch (file.type){
case "image/jpeg":
fName = fName + ".jpg";
break;
case "image/png":
fName = fName + ".png";
break;
default :
fName =fName + ".png";
break;
}
console.log(file.size);
var uploadDir = "./public/upload/" + fName;
fs.rename(file.path, uploadDir, function(err) {
if (err) {
res.write(err+"\n");
res.end();
}
res.write("upload image:<br/>");
res.write("<img src='/imgShow?id=" + fName + "' />");
res.end();
});
}
});
};
显示上传后的文件
tool.imgShow = function(req, res){
var fs = require("fs");
var arg = tool.handleGetArg(req, res);
var uploadDir = "./public/upload/" + arg["id"];
fs.readFile(uploadDir, "binary", function(err, file){
if(err){
res.write(err+"\n");
res.end();
}else{
res.write(file, "binary");
res.end();
}
});
};
node.js+express+jade系列六:图片的上传的更多相关文章
- node.js+express+jade系列七:富文本编辑框的使用
下载nicEdit富文本编辑框, 把nicEdit.js文件放到public/javascripts/下 新建jade文件:代码如下 doctype htmlhtml head t ...
- node.js+express+jade系列五:ajax登录
本文通过jquery实现简单的无刷新登录 1:首先要在router中配置登录请求,因为登录需要传user和pwd考虑到安全需用post请求 { path:'/', meth ...
- node.js+express+jade系列四:jade嵌套的使用
jade是express自带的模板引擎 jade文件可以嵌套使用,include引用外部jade文件,extends引用jade模板 例如 有一个主jade文件layout.jade,引用top.ja ...
- node.js+express+jade系列三:404错误的配置
1:新建一个404.jade 2:在app.js后面配置如下代码 app.use(function(req, res){ res.render("404", {sta ...
- node.js+express+jade系列二:rotue路由的配置
页面的访问最常见的是get和post两种,无论是get请求还是post请求express自动判断执行app.get或app.post 1:app.get(名称,路径)或app["get&qu ...
- node.js+express+jade系列一:session的使用
此出只介绍内存session的配置好使用 1:打开app.js文件,添加下面红色内容,一定要注意位置在router前面 app.use(express.methodOverride()); sessi ...
- node.js系列(实例):原生node.js+formidable模块实现简单的文件上传
/** * 原生node.js结合formidable模块实现图片上传改名 * @Author:Ghost * @Date:2016/07/15 * @description: * 1.引入模块htt ...
- [译]简单得不得了的教程-一步一步用 NODE.JS, EXPRESS, JADE, MONGODB 搭建一个网站
原文: http://cwbuecheler.com/web/tutorials/2013/node-express-mongo/ 原文的源代码在此 太多的教程教你些一个Hello, World!了, ...
- node.js:《接口实现文件的上传和下载》
使用node.js写上传文件和下载文件的接口 上传接口: 开始写接口前,我们先安装一个上传文件的插件:npm install multer 安装成功在package.json或package-lock ...
随机推荐
- 解决UISlider滑块不灵敏
由于UI给的thumbImage图片过小,默认UISlider开始拖动的手势范围只有thumbImage的大小之内. 为了解决这个问题需要创建一个子类继承于UISlider.重写其中的方法: - (C ...
- 第四篇: Ansible 常用模块使用
一. command | shell 模块 该模块为:执行命令模块 (由于命令模块较为强大,可根据自身对操作系统的熟练程度而增加.所以这里不再介绍类似可以实现同功能模块,比如service模块,需要重 ...
- 02 Memcache add详细介绍
一:Memcached add 命令参数 ()add key flag expire length [增] key: 键名(起一个独立的名字) flag 标志,要求为一个正整数 备注:()当Memca ...
- 2016 acm香港网络赛 C题. Classrooms(贪心)
原题网址:https://open.kattis.com/problems/classrooms Classrooms The new semester is about to begin, and ...
- python 微信跳一跳和源码解读
刚好周末,想研究一下前阵子很火的微信跳一跳 下面进入正文. 本文适用对象为WIN10系统,安卓用户.目的在于让丝毫没有接触过Python的小伙伴都能成功运行,如果你恰好是这样的对象,那么跟着我开始操作 ...
- MongoDBTemplate多条件查询的问题
问题: 在使用Spring Data MongoDB 进行条件查询数据时,发现条件判断不起作用,结果会返回所有的数据. Criteria criteria = new Criteria(); crit ...
- urllib.urlencode() 无法encode中文, UnicodeEncodeError
urllib.urlencode() 无法encode中文, UnicodeEncodeError, 具体错误内容如下:File "/System/Library/Frameworks/Py ...
- C#获取当前时间的各种格式
C#获取当前时间的各种格式 DateTime.Now.ToShortTimeString() DateTime dt = DateTime.Now; dt.ToString();//2005 ...
- AOP原理及其实现
AOP 是 Aspect-Oriented programming 的缩写,中文翻译为面向切面编程,它是OOP(Object-Oriented Programing,面向对象编程)的补充和完善. ...
- Python小练习(持续更新....)
最近一直在学习python,这些小练习有些是书上的,有些是别人博客上的! # 1.题目1# 给一个字符串,统计其中的数字.字母和其他类型字符的个数:# 比如输入“124mid-=”,输出:数字=3,字 ...