图片的上传
2015-10-31 16:58
309 查看
安装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',
url:'/uploadImg',
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();
}
});
};
先把文件上传到临时文件夹,再通过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',
url:'/uploadImg',
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();
}
});
};
相关文章推荐
- C语言 - 数组做函数参数发生了什么?
- node.js+express验证码的实现
- Java线程间通讯
- node.js定时任务:node-schedule的使用
- SQL Server 阻止了对组件 'Ad Hoc Distributed Queries' 的 STATEMENT
- 括号匹配问题
- 关于二维数组和二维指针的理解总结
- C++ fill 和memset
- C++ fill 和memset
- thinkphp 第二节
- linux jni 实现JAVA与C 通讯
- “指针数组的陷阱题”
- Track files and folders manipulation in Windows
- 前端和后端的输入合法性验证
- Tarjan 的应用
- 151031总结
- 关于Android开发中的证书和密钥等问题 转
- Java多线程详解
- bash实例
- 工厂模式