整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
今年國(guó)慶假期終于可以憋在家里了不用出門(mén)了，不用出去看后腦了，真的是一種享受。這么好的光陰怎么浪費(fèi)，睡覺(jué)、吃飯、打豆豆這怎么可能（耍多了也煩），完全不符合我們程序員的作風(fēng)，趕緊起來(lái)把文章寫(xiě)完。
這篇文章比較基礎(chǔ)，在國(guó)慶期間的業(yè)余時(shí)間寫(xiě)的，這幾天又完善了下，力求把更多的前端所涉及到的關(guān)于文件上傳的各種場(chǎng)景和應(yīng)用都涵蓋了,若有疏漏和問(wèn)題還請(qǐng)留言斧正和補(bǔ)充。
以下是本文所涉及到的知識(shí)點(diǎn)，break or continue ?
原理很簡(jiǎn)單，就是根據(jù) http 協(xié)議的規(guī)范和定義，完成請(qǐng)求消息體的封裝和消息體的解析，然后將二進(jìn)制內(nèi)容保存到文件。
我們都知道如果要上傳一個(gè)文件，需要把 form 標(biāo)簽的enctype設(shè)置為multipart/form-data,同時(shí)method必須為post方法。
那么multipart/form-data表示什么呢？
multipart互聯(lián)網(wǎng)上的混合資源，就是資源由多種元素組成，form-data表示可以使用HTML Forms 和 POST 方法上傳文件，具體的定義可以參考RFC 7578。
multipart/form-data 結(jié)構(gòu)
看下 http 請(qǐng)求的消息體
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryDCntfiXcSkPhS4PN 表示本次請(qǐng)求要上傳文件，其中boundary表示分隔符，如果要上傳多個(gè)表單項(xiàng)，就要使用boundary分割，每個(gè)表單項(xiàng)由———XXX開(kāi)始，以———XXX結(jié)尾。
每一個(gè)表單項(xiàng)又由Content-Type和Content-Disposition組成。
Content-Disposition: form-data 為固定值，表示一個(gè)表單元素，name 表示表單元素的 名稱，回車(chē)換行后面就是name的值，如果是上傳文件就是文件的二進(jìn)制內(nèi)容。
Content-Type：表示當(dāng)前的內(nèi)容的 MIME 類(lèi)型，是圖片還是文本還是二進(jìn)制數(shù)據(jù)。
解析
客戶端發(fā)送請(qǐng)求到服務(wù)器后，服務(wù)器會(huì)收到請(qǐng)求的消息體，然后對(duì)消息體進(jìn)行解析，解析出哪是普通表單哪些是附件。
可能大家馬上能想到通過(guò)正則或者字符串處理分割出內(nèi)容，不過(guò)這樣是行不通的，二進(jìn)制buffer轉(zhuǎn)化為string,對(duì)字符串進(jìn)行截取后，其索引和字符串是不一致的，所以結(jié)果就不會(huì)正確，除非上傳的就是字符串。
不過(guò)一般情況下不需要自行解析，目前已經(jīng)有很成熟的三方庫(kù)可以使用。
至于如何解析，這個(gè)也會(huì)占用很大篇幅，后面的文章在詳細(xì)說(shuō)。
使用 form 表單上傳文件
在 ie時(shí)代，如果實(shí)現(xiàn)一個(gè)無(wú)刷新的文件上傳那可是費(fèi)老勁了，大部分都是用 iframe 來(lái)實(shí)現(xiàn)局部刷新或者使用 flash 插件來(lái)搞定，在那個(gè)時(shí)代 ie 就是最好用的瀏覽器（別無(wú)選擇）。
DEMO
這種方式上傳文件，不需要 js ，而且沒(méi)有兼容問(wèn)題，所有瀏覽器都支持，就是體驗(yàn)很差，導(dǎo)致頁(yè)面刷新，頁(yè)面其他數(shù)據(jù)丟失。
HTML
<form method="post" action="http://localhost:8100" enctype="multipart/form-data">
選擇文件:
<input type="file" name="f1"/> input 必須設(shè)置 name 屬性，否則數(shù)據(jù)無(wú)法發(fā)送<br/>
<br/>
標(biāo)題：<input type="text" name="title"/><br/><br/><br/>
<button type="submit" id="btn-0">上 傳</button>
</form>
復(fù)制代碼服務(wù)端文件的保存基于現(xiàn)有的庫(kù)koa-body結(jié)合 koa2實(shí)現(xiàn)服務(wù)端文件的保存和數(shù)據(jù)的返回。
在項(xiàng)目開(kāi)發(fā)中，文件上傳本身和業(yè)務(wù)無(wú)關(guān)，代碼基本上都可通用。
在這里我們使用koa-body庫(kù)來(lái)實(shí)現(xiàn)解析和文件的保存。
koa-body 會(huì)自動(dòng)保存文件到系統(tǒng)臨時(shí)目錄下，也可以指定保存的文件路徑。
然后在后續(xù)中間件內(nèi)得到已保存的文件的信息，再做二次處理。
NODE
/**
* 服務(wù)入口
*/
var http = require('http');
var koaStatic = require('koa-static');
var path = require('path');
var koaBody = require('koa-body');//文件保存庫(kù)
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: {
//設(shè)置文件的默認(rèn)保存目錄，不設(shè)置則保存在系統(tǒng)臨時(shí)目錄下 os
uploadDir: path.resolve(__dirname, '../static/uploads')
},
multipart: true // 開(kāi)啟文件上傳，默認(rèn)是關(guān)閉
}));
//開(kāi)啟靜態(tài)文件訪問(wèn)
app.use(koaStatic(
path.resolve(__dirname, '../static')
));
//文件二次處理，修改名稱
app.use((ctx) => {
var file = ctx.request.files.f1;//得道文件對(duì)象
var path = file.path;
var fname = file.name;//原文件名稱
var nextPath = path+fname;
if(file.size>0 && path){
//得到擴(kuò)展名
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 ...... ');
復(fù)制代碼CODE
https://github.com/Bigerfe/fe-learn-code/
動(dòng)的目的：把多個(gè)盒子放在一行上
清除浮動(dòng)的目的：解決父盒子高度為0的問(wèn)題
清除浮動(dòng)，也稱閉合浮動(dòng)
注：本文不兼容IE6
未清除浮動(dòng)實(shí)現(xiàn)情況：
圖1
清除后：
圖2
原代碼：
復(fù)制代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮動(dòng)</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>
復(fù)制代碼
具體方法：
1.額外標(biāo)簽法
在含浮動(dòng)標(biāo)簽后加兄弟盒子清除浮動(dòng)
例：
復(fù)制代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮動(dòng)</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>
復(fù)制代碼
缺點(diǎn)：添加了許多空div
2.給父盒子overflow:hidden
觸發(fā)bfc模式（該名詞不懂請(qǐng)谷歌/百度，初學(xué)者可暫時(shí)略過(guò))，直接清除浮動(dòng)
復(fù)制代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮動(dòng)</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>
復(fù)制代碼
缺點(diǎn)：不可與position屬性配合使用
3.偽元素法
給父元素定義偽類(lèi):after(此處使用的是公共類(lèi)clearfix）
復(fù)制代碼
.clearfix:after{
content:"";/*內(nèi)容為空*/
visibility:hidden;/*將元素隱藏，但是在網(wǎng)頁(yè)中該占的位置還是占著*/
display:block;/*變成塊級(jí)元素*/
height:0;
clear:both;/*清除浮動(dòng)*/
}
復(fù)制代碼
具體代碼：
復(fù)制代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮動(dòng)</title>
<style type="text/css">
.clearfix:after{
content:"";/*內(nèi)容為空*/
visibility:hidden;/*將元素隱藏，但是在網(wǎng)頁(yè)中該占的位置還是占著*/
display:block;/*變成塊級(jí)元素*/
height:0;
clear:both;/*清除浮動(dòng)*/
}
.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>
復(fù)制代碼
缺點(diǎn)：IE8以上和非IE瀏覽器才支持
4.雙偽元素法
給父類(lèi)加上偽類(lèi):before和:after
復(fù)制代碼
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
復(fù)制代碼
具體代碼：
復(fù)制代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮動(dòng)</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>
復(fù)制代碼
附：
對(duì)于上述4種方法，優(yōu)先推薦方法3和4，當(dāng)然1和2也可，可根據(jù)具體情況使用。
還有幾種亂七八糟的清除浮動(dòng)方法，但是缺點(diǎn)多，故不提起.
最后你覺(jué)得我們的文章對(duì)你有幫助，歡迎關(guān)注我，可以私信我：久伴，領(lǐng)取學(xué)習(xí)資料，在評(píng)論下方可以關(guān)注我的學(xué)習(xí)群，你可以隨時(shí)在上面向我們提問(wèn)，把你在學(xué)習(xí)前端過(guò)程中所遇到的問(wèn)題發(fā)給我們。我們每天都會(huì)按時(shí)回復(fù)大家的每一個(gè)問(wèn)題，希望久伴可以伴隨你從入門(mén)到專(zhuān)家。
程序員web前端學(xué)習(xí)路線分享CSS浮動(dòng)-清除浮動(dòng)篇，為什么要清除浮動(dòng)
這里所說(shuō)的清除浮動(dòng)，并不是不要浮動(dòng)了，而是清除浮動(dòng)與浮動(dòng)之間的影響。那么到底會(huì)有什么影響呢？
1．高度塌陷
舉個(gè)例子我們看一下。
我們?cè)谶@里設(shè)置了div0是外容器，div1是內(nèi)部容器，div1因?yàn)樵O(shè)置了寬高是100，所以顯示的時(shí)候就是一個(gè)橙色的100*100的方塊，但是div0僅設(shè)置了背景色，因?yàn)閐iv特有的獨(dú)占一行，寬度會(huì)自動(dòng)100%，高度被內(nèi)部容器div1撐開(kāi)了，撐開(kāi)的高度是100像素，所有看到一個(gè)綠色高100像素，寬度100%的容器
現(xiàn)在我們給div1設(shè)置浮動(dòng)
這時(shí)候我們發(fā)現(xiàn)div0這個(gè)外容器沒(méi)了，看不見(jiàn)了。。別急，我們?cè)赿iv0里打一些字看看
我們發(fā)現(xiàn)aaa這些文字出來(lái)了，環(huán)繞在橙色方塊周?chē)耍@個(gè)原因在浮動(dòng)中我們已經(jīng)講解了，而且我們也發(fā)現(xiàn)綠色的容器也出來(lái)了，但是它的高度僅僅是文字的行高。這就說(shuō)明，內(nèi)部的橙色塊設(shè)置浮動(dòng)后，它的父級(jí)容器綠色塊就不知道橙色容器的高度了，因此綠色容器的高度變成了0，寫(xiě)入文字后，綠色容器重新被撐開(kāi)高度才可以看到。我們把這種情況稱為高度塌陷。
我們其實(shí)是希望一個(gè)容器中的內(nèi)容不斷的撐開(kāi)容器的高度，這樣我們后續(xù)的內(nèi)容就可以緊貼在上面了，而網(wǎng)頁(yè)中的內(nèi)容并不是都是靜態(tài)的，很多都需要每天更新，更新的內(nèi)容多少，圖片高度，都不相同。那么后面的東西想要緊貼上面的內(nèi)容，上面內(nèi)容的高度就不能設(shè)置一個(gè)固定數(shù)值，否則很多數(shù)據(jù)的時(shí)候放不下。如果不設(shè)置高度，一旦設(shè)置浮動(dòng)后，就會(huì)出現(xiàn)高度塌陷。丟失了高度后，頁(yè)面后續(xù)的內(nèi)容就會(huì)插在上面內(nèi)容的底部，頁(yè)面就會(huì)錯(cuò)亂，因此我們就需要做清除浮動(dòng)來(lái)解決這個(gè)問(wèn)題，最終做到即使使用浮動(dòng)，外容器也會(huì)因?yàn)閮?nèi)容的多少自動(dòng)撐開(kāi)高度，不會(huì)高度塌陷。
margin padding設(shè)置值不能正確顯示
2．Margin和padding屬性值不正確
由于浮動(dòng)導(dǎo)致父級(jí)子級(jí)之間設(shè)置了css padding、css margin屬性的值不能正確表達(dá)。特別是上下邊的padding和margin不能正確顯示。
要來(lái)解決這個(gè)問(wèn)題，我們就必須來(lái)認(rèn)識(shí)一下BFC
什么是BFC
要來(lái)理解BFC，先介紹一下Box和Formatting Context
Box 是 CSS 布局的對(duì)象和基本單位， 簡(jiǎn)單來(lái)說(shuō)頁(yè)面就是由Box組成，元素的類(lèi)型和 display 屬性，決定了這個(gè) Box 的類(lèi)型。 不同類(lèi)型的 Box， 會(huì)參與不同的 Formatting Context（一個(gè)決定如何渲染文檔的容器），因此Box內(nèi)的元素會(huì)以不同的方式渲染。
1、block-level box:display 屬性為 block, list-item, table 的元素，會(huì)生成 block-level box。并且參與 block formatting context；
2、inline-level box:display 屬性為 inline, inline-block, inline-table 的元素，會(huì)生成 inline-level box。并且參與 inline formatting context；
3、run-in box: css3 中才有， 這兒先不講了。
Formatting context 是 W3C CSS2.1 規(guī)范中的一個(gè)概念。它是頁(yè)面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。最常見(jiàn)的 Formatting context 有 Block fomatting context (簡(jiǎn)稱BFC)和 Inline formatting context (簡(jiǎn)稱IFC)。
BFC(Block formatting context)直譯為"塊級(jí)格式化上下文"。它是一個(gè)獨(dú)立的渲染區(qū)域，只有Block-level box參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個(gè)區(qū)域外部毫不相干。
BFC布局規(guī)則：
（1）內(nèi)部的Box會(huì)在垂直方向，一個(gè)接一個(gè)地放置。
（2）Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊
（3）每個(gè)元素的margin box的左邊， 與包含塊border box的左邊相接觸(對(duì)于從左往右的格式化，否則相反)。即使存在浮動(dòng)也是如此。
（4）BFC的區(qū)域不會(huì)與float box重疊。
（5）BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此。
（6）計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算
瞧，最后一條就是我們需要利用的了，我們只需要利用BFC就可以解決浮動(dòng)后外容器高度塌陷的問(wèn)題
如何生成BFC
1. 根元素是BFC模式
這種不能考慮，因?yàn)槎疾皇歉?/p>
2. 設(shè)置高度
顯然也是不可以的。
3. float屬性不為none
本來(lái)就要設(shè)置浮動(dòng)的。所以也不考慮
4. position為absolute或fixed
這樣設(shè)置后，就失去浮動(dòng)的意義了。因此也不使用
5. display為inline-block, table-cell, table-caption, flex, inline-flex
雖然可以開(kāi)啟，但是導(dǎo)致父元素原有寬度丟失
6. overflow不為visible
這種方法副作用比較小，但是還是有問(wèn)題的。比如overflow設(shè)置為hidden，這個(gè)不行，內(nèi)容的高度是撐開(kāi)的寬度也不能確定。設(shè)置為scroll，會(huì)出現(xiàn)右邊和下邊的滾動(dòng)條寬度
設(shè)置為auto最合適，不過(guò)，如果里面的內(nèi)容使用了定位，并且超出去就會(huì)出現(xiàn)滾動(dòng)條。所以只能保證內(nèi)容不能有定位。
Clear:both
清除：兩者間，顧名思義就是清除浮動(dòng)
我們看到如果要使用clear:both，就需要給高度塌陷的容器里面最后追加一個(gè)div，并且給這個(gè)div設(shè)置為clear：both，我們發(fā)現(xiàn)這種使用方法比較麻煩，每次設(shè)置都需要最后增加div。
因此我們做了一個(gè)修改
<!DOCTYPE html>
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
