nodejs应用:文件上传
功能:上传文件到服务器,图片支持客户端本地预览。
服务端
//server.js
'use strict';
const http = require('http');
const url = require('url');
const util = require('util');
const fs = require('fs');
const formidable = require('formidable');
const path = require('path');
http.createServer(function(req,res) {
if (req.url == '/upload' && req.method.toLowerCase() == 'post') {
var form = new formidable.IncomingForm();
form.encoding = 'utf8';
form.uploadDir = path.resolve(__filename,'../dir');
form.keepExtensions = true; //给文件加上对应的扩展名;
form.parse(req, function(err, fields, files) {
res.writeHead(200, {'content-type': 'text/plain'});
res.write('received upload:\n\n');
res.end(util.inspect({fields: fields, files: files}));
});
} else {
res.writeHead(200,{'Content-Type':'text/html;charset=utf8'});
fs.readFile('./index.html',function(err,data) {
res.end(data);
});
}
}).listen(70,function(){
console.log('ok');
})
客户端
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form>
<input type="file" id="uploadFile"/>
<img style="width:100px;height:auto" id="previewFile" src="" alt=""/>
<input type="button" id="btn" value="提交"/>
</form>
<script src="//cdn.bootcss.com/jquery/2.2.2/jquery.js"></script>
<script>
document.querySelector('#uploadFile').onchange = function() {
var reader = new FileReader();
if (document.querySelector('#uploadFile').files.length > 0){
var source = document.querySelector('#uploadFile').files[0];
reader.readAsDataURL(source);
reader.onload = function(oFREvent) {
document.querySelector('#previewFile').src = oFREvent.target.result;
}
} else {
return;
}
};
document.querySelector('#btn').onclick = function() {
var formData = new FormData();
formData.append('file',$('#uploadFile')[0].files[0]);
formData.append('hello','asddsfs');
$.ajax({
url: '/upload',
type: 'post',
data: formData,
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
success:function(data) {
console.log(data);
}
})
}
</script>
</body>
</html>
nodejs应用:文件上传的更多相关文章
- NodeJs之文件上传
NodeJs之文件上传 一,介绍与需求 1.1,介绍 1,multer模块 multer用于处理文件上传的nodejs中间件,主要跟express框架搭配使用,只支持表单MIME编码为multipar ...
- Nodejs express 文件上传
文件上传 以下我们创建一个用于上传文件的表单,使用 POST 方法,表单 enctype 属性设置为 multipart/form-data. index.htm 文件代码修改如下: <html ...
- nodejs实现文件上传
在使用ant-design的upload上传文件时,前端很好实现,那么我们如何实现node服务端呢? 服务端文件上传实现 var express = require('express'); var f ...
- nodejs+multiparty 文件上传
通过表单提交上传文件: html代码 <form action="/uploadFile" method="post" enctype=" ...
- nodeJs实现文件上传,下载,删除
转:https://blog.csdn.net/qq_36228442/article/details/81709272 一.简介 本文介绍了nodeJs+express框架下,用multer中间件实 ...
- 【nodejs】文件上传demo实现
文件结构: index.js var server = require('./server.js'); var router = require('./router.js'); var request ...
- Html5+NodeJS——拖拽多个文件上传到服务器
实现多文件拖拽上传的简易Node项目,可以在github上下载,你可以先下载下来:https://github.com/Johnharvy/upLoadFiles/. 解开下载下的zip格式包,建议用 ...
- Nodejs进阶:基于express+multer的文件上传
关于作者 程序猿小卡,前腾讯IMWEB团队成员,阿里云栖社区专家博主.欢迎加入 Express前端交流群(197339705). 正在填坑:<Nodejs学习笔记> / <Expre ...
- nodejs学习之文件上传
最近要做个图片上传的需求,因为服务端春节请假回家还没来,所以就我自己先折腾了一下,大概做出来个效果,后台就用了nodejs,刚开始做的时候想网上找一下资料,发现大部分资料都是用node-formida ...
随机推荐
- 用Count() > 0 来判断集合非空的问题
Linq 出现之前,我们通常使用下面的方式来判断集合是否非空,即集合包含元素: ]; ; var list = new List<string>(); ; var collection = ...
- notes for lxf(三)
纯函数式编程是没有变量的,只要输入确定输出就确定 指高度抽象的编程范式 特点 函数本身可以作为参数传入 或者允许返回一个函数 Higher-order function 一个函数可以接收另一个函数作为 ...
- SpringBoot与日志框架1(基本使用)
一.日志框架 1.无论在什么系统,日志框架都是一个重要角色,所以理解和用好日志框架是相当重要的:像JDBC一样,日志框架分为接口层的门面和具体的实现组成. 2.市面上的产品: 2.1门面:SLF4J( ...
- CF741C.Arpa’s overnight party and Mehrdad’s silent entering [构造 二分图染色]
CF741C - Arpa's overnight party and Mehrdad's silent entering 题意: 有 n 对情侣坐成一个圈,有两种食物Kooft and Zahre- ...
- 第六章 对象-javaScript权威指南第六版(四)
6.6 属性getter和setter 对象属性是由名字.值和一组特性(attribute)构成的. getter和setter定义的属性称做"存取器属性"(accessor pr ...
- NOI2017总结
时光剥离你我像一袭华美衣衫 却要被追悔爬满 退役之战,去得匆匆,看得蒙蒙. 第三次全国赛,曾经的APIO初二选手也走到了时间的尽头. 第一次走向全国舞台的激动与忐忑,第一次在大赛中失利的沮丧与绝望,第 ...
- Eureka-Client(Golang实现)
Eureka-Client Golang实现eureka-client 原理 根据Java版本的源码,可以看出client主要是通过REST请求来与server进行通信. Java版本的核心实现:co ...
- 详解微信小程序开发(项目从零开始)
一.序 微信小程序,估计大家都不陌生,现在应用场景特别多.今天就系统的介绍一下小程序开发.注意,这里只从项目代码上做解析,不涉及小程序如何申请.打包.发布的东西.(这些跟着微信官方文档的流程走就好). ...
- android中进度条的实现
布局: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:androi ...
- python枚举类型
笔记: 一:枚举类型的定义二:枚举类和普通类的区别 1:值不可变 2:具有防止相同标签得功能,不同标签的值可以相同! 三:枚举类型.枚举值.枚举名称 1:VIP.YELLOW.Value 获得标签的值 ...