整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
今年国庆假期终于可以憋在家里了不用出门了，不用出去看后脑了，真的是一种享受。这么好的光阴怎么浪费，睡觉、吃饭、打豆豆这怎么可能（耍多了也烦），完全不符合我们程序员的作风，赶紧起来把文章写完。
这篇文章比较基础，在国庆期间的业余时间写的，这几天又完善了下，力求把更多的前端所涉及到的关于文件上传的各种场景和应用都涵盖了,若有疏漏和问题还请留言斧正和补充。
以下是本文所涉及到的知识点，break or continue ?
原理很简单，就是根据 http 协议的规范和定义，完成请求消息体的封装和消息体的解析，然后将二进制内容保存到文件。
我们都知道如果要上传一个文件，需要把 form 标签的enctype设置为multipart/form-data,同时method必须为post方法。
那么multipart/form-data表示什么呢？
multipart互联网上的混合资源，就是资源由多种元素组成，form-data表示可以使用HTML Forms 和 POST 方法上传文件，具体的定义可以参考RFC 7578。
multipart/form-data 结构
看下 http 请求的消息体
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryDCntfiXcSkPhS4PN 表示本次请求要上传文件，其中boundary表示分隔符，如果要上传多个表单项，就要使用boundary分割，每个表单项由———XXX开始，以———XXX结尾。
每一个表单项又由Content-Type和Content-Disposition组成。
Content-Disposition: form-data 为固定值，表示一个表单元素，name 表示表单元素的 名称，回车换行后面就是name的值，如果是上传文件就是文件的二进制内容。
Content-Type：表示当前的内容的 MIME 类型，是图片还是文本还是二进制数据。
解析
客户端发送请求到服务器后，服务器会收到请求的消息体，然后对消息体进行解析，解析出哪是普通表单哪些是附件。
可能大家马上能想到通过正则或者字符串处理分割出内容，不过这样是行不通的，二进制buffer转化为string,对字符串进行截取后，其索引和字符串是不一致的，所以结果就不会正确，除非上传的就是字符串。
不过一般情况下不需要自行解析，目前已经有很成熟的三方库可以使用。
至于如何解析，这个也会占用很大篇幅，后面的文章在详细说。
使用 form 表单上传文件
在 ie时代，如果实现一个无刷新的文件上传那可是费老劲了，大部分都是用 iframe 来实现局部刷新或者使用 flash 插件来搞定，在那个时代 ie 就是最好用的浏览器（别无选择）。
DEMO
这种方式上传文件，不需要 js ，而且没有兼容问题，所有浏览器都支持，就是体验很差，导致页面刷新，页面其他数据丢失。
HTML
<form method="post" action="http://localhost:8100" enctype="multipart/form-data">
选择文件:
<input type="file" name="f1"/> input 必须设置 name 属性，否则数据无法发送<br/>
<br/>
标题：<input type="text" name="title"/><br/><br/><br/>
<button type="submit" id="btn-0">上 传</button>
</form>
复制代码服务端文件的保存基于现有的库koa-body结合 koa2实现服务端文件的保存和数据的返回。
在项目开发中，文件上传本身和业务无关，代码基本上都可通用。
在这里我们使用koa-body库来实现解析和文件的保存。
koa-body 会自动保存文件到系统临时目录下，也可以指定保存的文件路径。
然后在后续中间件内得到已保存的文件的信息，再做二次处理。
NODE
/**
* 服务入口
*/
var http = require('http');
var koaStatic = require('koa-static');
var path = require('path');
var koaBody = require('koa-body');//文件保存库
var fs = require('fs');
var Koa = require('koa2');
var app = new Koa();
var port = process.env.PORT || '8100';
var uploadHost= `http://localhost:${port}/uploads/`;
app.use(koaBody({
formidable: {
//设置文件的默认保存目录，不设置则保存在系统临时目录下 os
uploadDir: path.resolve(__dirname, '../static/uploads')
},
multipart: true // 开启文件上传，默认是关闭
}));
//开启静态文件访问
app.use(koaStatic(
path.resolve(__dirname, '../static')
));
//文件二次处理，修改名称
app.use((ctx) => {
var file = ctx.request.files.f1;//得道文件对象
var path = file.path;
var fname = file.name;//原文件名称
var nextPath = path+fname;
if(file.size>0 && path){
//得到扩展名
var extArr = fname.split('.');
var ext = extArr[extArr.length-1];
var nextPath = path+'.'+ext;
//重命名文件
fs.renameSync(path, nextPath);
}
//以 json 形式输出上传文件地址
ctx.body = `{
"fileUrl":"${uploadHost}${nextPath.slice(nextPath.lastIndexOf('/')+1)}"
}`;
});
/**
* http server
*/
var server = http.createServer(app.callback());
server.listen(port);
console.log('demo1 server start ...... ');
复制代码CODE
https://github.com/Bigerfe/fe-learn-code/
动的目的：把多个盒子放在一行上
清除浮动的目的：解决父盒子高度为0的问题
清除浮动，也称闭合浮动
注：本文不兼容IE6
未清除浮动实现情况：
图1
清除后：
图2
原代码：
复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮动</title>
<style type="text/css">
.content{
width:960px;
margin:100px auto;
border: 1px solid #ccc;
}
.left{
width:400px;
height: 200px;
background-color: green;
float: left;
}
.right{
width: 400px;
height: 200px;
background-color: red;
float: right;
}
</style>
</head>
<body>
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
复制代码
具体方法：
1.额外标签法
在含浮动标签后加兄弟盒子清除浮动
例：
复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮动</title>
<style type="text/css">
.content{
width:960px;
margin:100px auto;
border: 1px solid #ccc;
}
.left{
width:400px;
height: 200px;
background-color: green;
float: left;
}
.right{
width: 400px;
height: 200px;
background-color: red;
float: right;
}
.clearbox{
clear:both;
}
</style>
</head>
<body>
<div class="content">
<div class="left"></div>
<div class="right"></div>
<div class="clearbox"></div>
</div>
</body>
</html>
复制代码
缺点：添加了许多空div
2.给父盒子overflow:hidden
触发bfc模式（该名词不懂请谷歌/百度，初学者可暂时略过)，直接清除浮动
复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮动</title>
<style type="text/css">
.content{
width:960px;
margin:100px auto;
border: 1px solid #ccc;
overflow: hidden;
}
.left{
width:400px;
height: 200px;
background-color: green;
float: left;
}
.right{
width: 400px;
height: 200px;
background-color: red;
float: right;
}
.clearbox{
clear:both;
}
</style>
</head>
<body>
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
复制代码
缺点：不可与position属性配合使用
3.伪元素法
给父元素定义伪类:after(此处使用的是公共类clearfix）
复制代码
.clearfix:after{
content:"";/*内容为空*/
visibility:hidden;/*将元素隐藏，但是在网页中该占的位置还是占着*/
display:block;/*变成块级元素*/
height:0;
clear:both;/*清除浮动*/
}
复制代码
具体代码：
复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮动</title>
<style type="text/css">
.clearfix:after{
content:"";/*内容为空*/
visibility:hidden;/*将元素隐藏，但是在网页中该占的位置还是占着*/
display:block;/*变成块级元素*/
height:0;
clear:both;/*清除浮动*/
}
.content{
width:960px;
margin:100px auto;
border: 1px solid #ccc;
}
.left{
width:400px;
height: 200px;
background-color: green;
float: left;
}
.right{
width: 400px;
height: 200px;
background-color: red;
float: right;
}
.clearbox{
clear:both;
}
</style>
</head>
<body>
<div class="content clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
复制代码
缺点：IE8以上和非IE浏览器才支持
4.双伪元素法
给父类加上伪类:before和:after
复制代码
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
复制代码
具体代码：
复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮动</title>
<style type="text/css">
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.content{
width:960px;
margin:100px auto;
border: 1px solid #ccc;
}
.left{
width:400px;
height: 200px;
background-color: green;
float: left;
}
.right{
width: 400px;
height: 200px;
background-color: red;
float: right;
}
.clearbox{
clear:both;
}
</style>
</head>
<body>
<div class="content clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
复制代码
附：
对于上述4种方法，优先推荐方法3和4，当然1和2也可，可根据具体情况使用。
还有几种乱七八糟的清除浮动方法，但是缺点多，故不提起.
最后你觉得我们的文章对你有帮助，欢迎关注我，可以私信我：久伴，领取学习资料，在评论下方可以关注我的学习群，你可以随时在上面向我们提问，把你在学习前端过程中所遇到的问题发给我们。我们每天都会按时回复大家的每一个问题，希望久伴可以伴随你从入门到专家。
程序员web前端学习路线分享CSS浮动-清除浮动篇，为什么要清除浮动
这里所说的清除浮动，并不是不要浮动了，而是清除浮动与浮动之间的影响。那么到底会有什么影响呢？
1．高度塌陷
举个例子我们看一下。
我们在这里设置了div0是外容器，div1是内部容器，div1因为设置了宽高是100，所以显示的时候就是一个橙色的100*100的方块，但是div0仅设置了背景色，因为div特有的独占一行，宽度会自动100%，高度被内部容器div1撑开了，撑开的高度是100像素，所有看到一个绿色高100像素，宽度100%的容器
现在我们给div1设置浮动
这时候我们发现div0这个外容器没了，看不见了。。别急，我们在div0里打一些字看看
我们发现aaa这些文字出来了，环绕在橙色方块周围了，这个原因在浮动中我们已经讲解了，而且我们也发现绿色的容器也出来了，但是它的高度仅仅是文字的行高。这就说明，内部的橙色块设置浮动后，它的父级容器绿色块就不知道橙色容器的高度了，因此绿色容器的高度变成了0，写入文字后，绿色容器重新被撑开高度才可以看到。我们把这种情况称为高度塌陷。
我们其实是希望一个容器中的内容不断的撑开容器的高度，这样我们后续的内容就可以紧贴在上面了，而网页中的内容并不是都是静态的，很多都需要每天更新，更新的内容多少，图片高度，都不相同。那么后面的东西想要紧贴上面的内容，上面内容的高度就不能设置一个固定数值，否则很多数据的时候放不下。如果不设置高度，一旦设置浮动后，就会出现高度塌陷。丢失了高度后，页面后续的内容就会插在上面内容的底部，页面就会错乱，因此我们就需要做清除浮动来解决这个问题，最终做到即使使用浮动，外容器也会因为内容的多少自动撑开高度，不会高度塌陷。
margin padding设置值不能正确显示
2．Margin和padding属性值不正确
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。
要来解决这个问题，我们就必须来认识一下BFC
什么是BFC
要来理解BFC，先介绍一下Box和Formatting Context
Box 是 CSS 布局的对象和基本单位， 简单来说页面就是由Box组成，元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。
1、block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block formatting context；
2、inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；
3、run-in box: css3 中才有， 这儿先不讲了。
Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
BFC布局规则：
（1）内部的Box会在垂直方向，一个接一个地放置。
（2）Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
（3）每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
（4）BFC的区域不会与float box重叠。
（5）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
（6）计算BFC的高度时，浮动元素也参与计算
瞧，最后一条就是我们需要利用的了，我们只需要利用BFC就可以解决浮动后外容器高度塌陷的问题
如何生成BFC
1. 根元素是BFC模式
这种不能考虑，因为都不是根元素
2. 设置高度
显然也是不可以的。
3. float属性不为none
本来就要设置浮动的。所以也不考虑
4. position为absolute或fixed
这样设置后，就失去浮动的意义了。因此也不使用
5. display为inline-block, table-cell, table-caption, flex, inline-flex
虽然可以开启，但是导致父元素原有宽度丢失
6. overflow不为visible
这种方法副作用比较小，但是还是有问题的。比如overflow设置为hidden，这个不行，内容的高度是撑开的宽度也不能确定。设置为scroll，会出现右边和下边的滚动条宽度
设置为auto最合适，不过，如果里面的内容使用了定位，并且超出去就会出现滚动条。所以只能保证内容不能有定位。
Clear:both
清除：两者间，顾名思义就是清除浮动
我们看到如果要使用clear:both，就需要给高度塌陷的容器里面最后追加一个div，并且给这个div设置为clear：both，我们发现这种使用方法比较麻烦，每次设置都需要最后增加div。
因此我们做了一个修改
<!DOCTYPE html>
*请认真填写需求信息，我们会在24小时内与您取得联系。
