手把手教你前端的各種文件上傳攻略和大文件斷點續傳

在前面

今年國慶假期終于可以憋在家里了不用出門了，不用出去看后腦了，真的是一種享受。這么好的光陰怎么浪費，睡覺、吃飯、打豆豆這怎么可能（耍多了也煩），完全不符合我們程序員的作風，趕緊起來把文章寫完。

這篇文章比較基礎，在國慶期間的業余時間寫的，這幾天又完善了下，力求把更多的前端所涉及到的關于文件上傳的各種場景和應用都涵蓋了,若有疏漏和問題還請留言斧正和補充。

自測讀不讀

以下是本文所涉及到的知識點，break or continue ?

文件上傳原理
最原始的文件上傳
使用 koa2 作為服務端寫一個文件上傳接口
單文件上傳和上傳進度
多文件上傳和上傳進度
拖拽上傳
剪貼板上傳
大文件上傳之分片上傳
大文件上傳之斷點續傳
node 端文件上傳

原理概述

原理很簡單，就是根據 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結尾。

消息體- Form Data 部分

每一個表單項又由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 會自動保存文件到系統臨時目錄下，也可以指定保存的文件路徑。

然后在后續中間件內得到已保存的文件的信息，再做二次處理。

ctx.request.files.f1 得到文件信息，f1為input file 標簽的 name
獲得文件的擴展名，重命名文件

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>

.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>

</body>

</html>

復制代碼

具體方法：

1.額外標簽法

在含浮動標簽后加兄弟盒子清除浮動

例：

復制代碼

<!DOCTYPE html>

<html>

<head>

.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>

</body>

</html>

復制代碼

缺點：添加了許多空div

2.給父盒子overflow:hidden

觸發bfc模式（該名詞不懂請谷歌/百度，初學者可暫時略過)，直接清除浮動

復制代碼

<!DOCTYPE html>

<html>

<head>

.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>

</body>

</html>

復制代碼

缺點：不可與position屬性配合使用

3.偽元素法

給父元素定義偽類:after(此處使用的是公共類clearfix）

復制代碼

.clearfix:after{

content:"";/*內容為空*/

visibility:hidden;/*將元素隱藏，但是在網頁中該占的位置還是占著*/

display:block;/*變成塊級元素*/

height:0;

clear:both;/*清除浮動*/

}

復制代碼

具體代碼：

復制代碼

<!DOCTYPE html>

<html>

<head>

.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>

</body>

</html>

復制代碼

缺點：IE8以上和非IE瀏覽器才支持

4.雙偽元素法

給父類加上偽類:before和:after

復制代碼

.clearfix:before,.clearfix:after{

content:"";

display:table;

}

.clearfix:after{

clear:both;

}

復制代碼

具體代碼：

復制代碼

<!DOCTYPE html>

<html>

<head>

.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>

</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>

在線咨詢

上一篇：純JS手寫輪播圖（代碼邏輯清晰，通俗易懂）
下一篇：前端開發-CSS 偽元素實現按鈕波紋效果

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

手把手教你前端的各種文件上傳攻略和大文件斷點續傳

在前面

自測讀不讀

原理概述

最原始的文件上傳

文件上傳接口

您的項目需求