node 图片上传功能
node 代码:
var http = require("http");
var express = require('express')
app = express(),
formidable = require('formidable'),
fs = require('fs');
app.use(express.static(__dirname + "/public"));
//创建服务器
http.createServer(app).listen(, function() {
console.log("当前您设置的端口号为" + );
});
app.post('/', function(req, res) {
var formidable = require('formidable');
var form = new formidable.IncomingForm(); //创建上传表单
form.encoding = 'utf-8'; //设置编辑
form.uploadDir = 'img/'; //设置上传目录/并且保证该目录存在 否则上传不成功
form.keepExtensions = true; //保留后缀
form.maxFieldsSize = * * ; //文件大小
form.parse(req, function(err, fields, files) {
console.log(fields);//前台传的其他参数
if(err){
console.log(err);
}
var item = null;
for(var i in files){
item = files[i];
}
var extName = ''; //后缀名
switch (item.type) {
case 'image/pjpeg':
extName = 'jpg';
break;
case 'image/jpeg':
extName = 'jpg';
break;
case 'image/png':
extName = 'png';
break;
case 'image/x-png':
extName = 'png';
break;
}
if(extName.length == ){
console.log('只支持png和jpg格式图片');
return;
}
var avatarName = Date.now() + '.' + extName; //设置图片名字
var newPath = form.uploadDir + avatarName; //设置新的图片路径
fs.renameSync(item.path, newPath); //重命名
console.log(newPath);
res.send(newPath);
});
});
form表单上传:
<form action="/" method="post" enctype="multipart/form-data">
<input type="file" name="fulAvatar" id="file1" />
<input type="text" name="text" id="" value="" />
<input type="submit" value="上传"/>
</form>
ajax上传:
html代码: <input type="file" name="fulAvatar" id="file1" />
<button id='file'>上传</button> js代码:
$('#file').click(function(){
var data = new FormData();
var files = $("#file1")[].files;
if(files){
data.append("fulAvatar", files[]);
}
data.append('name','zs');//传其他数据
if(files[].size>){
alert('上传图片大小不得超过100KB');
return false;
}
$.ajax({
type: 'post',
url:'/',
data:data,
contentType: false,
processData: false,
success : function (msg) {
console.log(msg);
}
})
});
原生ajax上传:
html代码: <input type="file" name="fulAvatar" id="file1" />
<button id='btn'>上传</button> js代码:
document.querySelector('#btn').onclick = function() {
var fileObj = document.getElementById("file1").files[];
var form = new FormData();
form.append("fulAvatar", fileObj);
form.append("test","zs");//传其他数据
var XHR=null;
if (window.XMLHttpRequest) {
// 非IE内核
XHR = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// IE内核,这里早期IE的版本写法不同,具体可以查询下
XHR = new ActiveXObject("Microsoft.XMLHTTP");
} else {
XHR = null;
}
if(XHR){
XHR.open("POST", "http://www.hxh999.cn/img");
XHR.onreadystatechange = function () {
if (XHR.readyState == && XHR.status == ) {
// 这里可以对返回的内容做处理
// 一般会返回JSON或XML数据格式
console.log(XHR.responseText);
// 主动释放,JS本身也会回收的
XHR = null;
}
};
XHR.send(form);
}
}
注意:
form.parse()不会触发的原因是:app.use(express.bodyParser())这一句处理了文件类型的post,所以导致那些第三方包对文件的处理都不起作用了。
express.bodyParser实际上包括了三部分:express.json, express.urlencoded, 和 express.multipart(就是处理了文件的部分),所以我们实际上只需要它的前两部分就够了。
// 将:
app.use(express.bodyParser()); // 改为:
app.use(express.json());
app.use(express.urlencoded());
node 图片上传功能的更多相关文章
- thinkphp达到UploadFile.class.php图片上传功能
片上传在站点里是非经常常使用的功能.ThinkPHP里也有自带的图片上传类(UploadFile.class.php) 和图片模型类(Image.class.php).方便于我们去实现图片上传功能,以 ...
- Spring+SpringMVC+MyBatis+easyUI整合优化篇(七)图片上传功能
日常啰嗦 前一篇文章<Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合>讲了富文本编辑器UEditor的整合与使用 ...
- PHP语言学习之php做图片上传功能
本文主要向大家介绍了PHP语言学习之php做图片上传功能,通过具体的内容向大家展示,希望对大家学习php语言有所帮助. 今天来做一个图片上传功能的插件,首先做一个html文件:text.php < ...
- [Ting's笔记Day8]活用套件carrierwave gem:(3)Deploy图片上传功能到Heroku网站
前情提要: 身为Ruby新手村民,创造稳定且持续的学习步调很重要,我用的方法就是一周在IT邦写三篇笔记,希望藉由把笔记和遇到的bug记录下来的过程,能帮助到未来想用Ruby on Rails架站的新手 ...
- H5 利用vue实现图片上传功能。
H5的上传图片如何实现呢? 以下是我用vue实现的图片上传功能,仅供参考. <!DOCTYPE html> <html> <head> <meta chars ...
- 给DEDECMS广告管理中增加图片上传功能
dedecms的广告管理功能稍微有点次,本文就是在dedecms广告管理原有的基础上增加广告图片上传功能. 安装方法,对应自己的dedecms版本下载对应的编码然后解压把里面的文件放在后台目录覆盖即可 ...
- vue 图片上传功能
这次做了vue页面的图片上传功能,不带裁剪功能的! 首先是html代码,在input框上添加change事件,如下: <ul class="clearfix"> ...
- 前端丨如何使用 tcb-js-sdk 实现图片上传功能
前言 tcb-js-sdk 让开发者可以在网页端使用 JavaScript 代码服务访问云开发的服务,以轻松构建自己的公众号页面或者独立的网站等 Web 服务.本文将以实现图片上传功能为例,介绍 tc ...
- Node.js实现图片上传功能
node接口实现 const express = require('express') const mysql = require('mysql') const cors = require('cor ...
随机推荐
- mybatis映射文件mapper.xml的写法(collections...)
转自:https://blog.csdn.net/two_people/article/details/51759881 在学习mybatis的时候我们通常会在映射文件这样写: <?xml ve ...
- LG1116 【车厢重组】
前言 看了大家的做法,什么冒泡排序,插入排序,树状数组,线段树,都好厉害呐,我都没想出来 但我发现竟然还没有人用主席树,于是我跟大家交流一下 主席树 做法 显然我们有 \(Ans=\sum_{i=1} ...
- test20180919 区间最大值
题意 分析 我们将所有修改操作的左右端点都拿出来混合着排序. 然后扫描线一样扫描每个端点,维护一个堆储存当前最大值,然后就可以把这些修改操作分成O(m) 个不相交的区间,各自贡献独立. 复杂度为\(O ...
- smarty学习——缓存
存被用来保存一个文档的输出从而加速display()或fetch()函数的执行.如果一个函数被加进缓存,那么实际输出的内容将用缓存来代替. 缓存可让事物非常快速的执行,特别是带有长计算时间的模板.一旦 ...
- transient解释
http://www.cnblogs.com/lanxuezaipiao/p/3369962.html
- Microsoft Dynamics CRM4.0 和 Microsoft Dynamics CRM 2011 JScript 方法对比
CRM 2011 如果需要再IE里面调试,可以按F12在前面加上contentIFrame,比如 contentIFrame.document.getElementById("字段" ...
- linux 守护进程(daemon process)代码-详细注释
1. 进程组 组长不能创建新的 会话. 其它进程可以创建新的会话,创建后既成为会话首领,同时失去控制终端. 2. 会话首领可以重新打开控制终端 1 #include <stdio.h> 2 ...
- Redis 密码设置和查看密码
Redis 密码设置和查看密码 redis没有实现访问控制这个功能,但是它提供了一个轻量级的认证方式,可以编辑redis.conf配置来启用认证. 1.初始化Redis密码: 在配置文件中有个参数: ...
- google浏览器清除缓存
google浏览器设置不缓存的方法 摘要:我们在做web开发的时候特别是在调试js时,会经常使用的google浏览器,这个时候就要我们修改过的代码可能不能生效.这是因为我们的浏览器默认是有缓存的,但是 ...
- ffmpeg 编码(视屏)
分析ffmpeg_3.3.2 muxing 1:分析主函数,代码如下: int main(int argc, char **argv) { OutputStream video_st = { }, a ...