本相關(guān)的屬性一般具有繼承性，即給祖先設(shè)置的樣式，同樣被后代標(biāo)簽所繼承。

通常具有繼承性樣式

• color 文本顏色。
• font-weight、font-family、font-size 等以font開頭的通常和文本相關(guān)的屬性。
• text-indent、text-align 等以 text開頭的通常和段落相關(guān)的屬性。
• line-height 等 以line開頭的屬性。
• list-style 等 以 list開頭的屬性。

在實(shí)踐過(guò)程中，通常我們會(huì) 設(shè)置一些通用的全局屬性，比如背景色、字號(hào)等， 設(shè)置在 HTML的body標(biāo)簽上，這樣默認(rèn)的所有body下的子標(biāo)簽都具有了此樣式。

在繼承的情況下，選擇器權(quán)重失效（了解選擇器權(quán)重）從而遵循 就近原則， 標(biāo)簽會(huì)選擇距離自己最近的樣式。

在前面

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

這篇文章比較基礎(chǔ)，在國(guó)慶期間的業(yè)余時(shí)間寫的，這幾天又完善了下，力求把更多的前端所涉及到的關(guān)于文件上傳的各種場(chǎng)景和應(yīng)用都涵蓋了,若有疏漏和問(wèn)題還請(qǐng)留言斧正和補(bǔ)充。

自測(cè)讀不讀

以下是本文所涉及到的知識(shí)點(diǎn)，break or continue ?

• 文件上傳原理
• 最原始的文件上傳
• 使用 koa2 作為服務(wù)端寫一個(gè)文件上傳接口
• 單文件上傳和上傳進(jìn)度
• 多文件上傳和上傳進(jìn)度
• 拖拽上傳
• 剪貼板上傳
• 大文件上傳之分片上傳
• 大文件上傳之?dāng)帱c(diǎn)續(xù)傳
• node 端文件上傳

原理概述

原理很簡(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)求的消息體

• 請(qǐng)求頭：

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryDCntfiXcSkPhS4PN 表示本次請(qǐng)求要上傳文件，其中boundary表示分隔符，如果要上傳多個(gè)表單項(xiàng)，就要使用boundary分割，每個(gè)表單項(xiàng)由———XXX開始，以———XXX結(jié)尾。

• 消息體- Form Data 部分

每一個(gè)表單項(xiàng)又由Content-Type和Content-Disposition組成。

Content-Disposition: form-data 為固定值，表示一個(gè)表單元素，name 表示表單元素的 名稱，回車換行后面就是name的值，如果是上傳文件就是文件的二進(jìn)制內(nèi)容。

Content-Type：表示當(dāng)前的內(nèi)容的 MIME 類型，是圖片還是文本還是二進(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)目開發(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)得到已保存的文件的信息，再做二次處理。

• ctx.request.files.f1 得到文件信息，f1為input file 標(biāo)簽的 name
• 獲得文件的擴(kuò)展名，重命名文件

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 // 開啟文件上傳，默認(rèn)是關(guān)閉
}));

//開啟靜態(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/

者：張?chǎng)涡瘢ˊ張?chǎng)涡瘢?/p>

網(wǎng)址：http://www.zhangxinxu.com/wordpress/2016/03/know-about-css3-all/

一、兼容性

一些CSS文章，或者CSS文檔，兼容性什么的都是放在最后。

又不是什么見(jiàn)不得人的事情，來(lái)，直接開篇就亮刺刀。

兼容性還行， 除了IE不支持，其他瀏覽器基本上都綠油油，目前自?shī)首詷?lè)，內(nèi)網(wǎng)項(xiàng)目什么的都是可以用用的。

二、all是干嘛用的

all屬性實(shí)際上是所有CSS屬性的縮寫，表示，所有的CSS屬性都怎樣怎樣，但是，不包括unicode-bidi和direction這兩個(gè)CSS屬性。

為什么會(huì)有這個(gè)CSS屬性呢？

我們可能知道，有些CSS屬性值基本上所有CSS屬性都有，比方說(shuō)繼承inherit!

我們CSS reset輸入框的時(shí)候，是不是有類似這樣的代碼（實(shí)際可能是具體值，作用類似）：

input, textarea {

color: inherit;

font-size: inherit;

font-family: inherit;

}

因?yàn)檫@類輸入控件自身有內(nèi)置的大小和字體，需要重置。

此時(shí)，大家就會(huì)發(fā)現(xiàn)，這些屬性值都是inherit, 要是可以合并就好了！

喲喲喲，說(shuō)到點(diǎn)子上了，CSS all屬性就是用來(lái)合并的。

input, textarea {

all: inherit;

}

喔噢，三合一，頓時(shí)一陣春風(fēng)拂面之感。但是，這里僅僅是展示作用，實(shí)際上是不會(huì)這么用的，因?yàn)椋琣ll:inherit會(huì)讓背景色什么的，都繼承父級(jí)，相信這不是你希望看到的。

三、語(yǔ)法和區(qū)別

語(yǔ)法如下：

all: initial;

all: inherit;

all: unset;

/* CSS4特性，無(wú)視之 */

all: revert;

支持三個(gè)CSS通用屬性值，initial, inherit, unset. 這三個(gè)屬性值分別表示什么意思呢？

您可以狠狠地點(diǎn)擊這里：CSS3 all屬性演示demo（http://www.zhangxinxu.com/study/201603/css3-all.html）

默認(rèn)的HTML和CSS是這樣的，一個(gè)傳統(tǒng)的標(biāo)簽內(nèi)容，有標(biāo)題有列表：

<article>

<h6>標(biāo)題</h6>

<p>p變文字</p>

<ol>

<li>有序列表1</li>

<li>有序列表2</li>

<li>有序列表3</li>

</ol>

<textarea>文本域</textarea>

</article>

article {

background-color: #f0f3f9;

color: green;

}

article > textarea {

border: 1px solid #34538b;

background-color: #ffffe0;

color: red;

}

這盛世，如你所見(jiàn)：

顏色啊，間距啊，以及文本域狀態(tài)都是我們認(rèn)為的樣子顯示。

現(xiàn)在，點(diǎn)擊demo的下拉，選擇對(duì)應(yīng)的all屬性值，實(shí)現(xiàn)下面CSS效果：

.initial > * {

all: initial;

}

.inherit > * {

all: inherit;

}

.unset > * {

all: unset;

}

結(jié)果：

• initial

initial是初始值的意思，也就是，article元素下面所有的第一級(jí)子元素都除了unicode-bidi和direction以外的CSS都使用初始值。

例如，<h6>, <p>元素瀏覽器內(nèi)置的display:block直接拜拜了，都變成了inline元素，因此在一行顯示：

font-size也使用了瀏覽器軟件本身設(shè)置的大小16px，color顏色也變成了瀏覽器軟件本身的黑色。例如，在瀏覽器設(shè)置中改變字號(hào)，從中變成大：

會(huì)看到顯示的文字內(nèi)容也變大了：

由于我們只是對(duì)相鄰層級(jí)子元素進(jìn)行了initial設(shè)置，因此，<li>元素不受影響，但是，由于在父元素不明的情況下，<li>元素的默認(rèn)是打點(diǎn)，因此，這里從數(shù)字變成了點(diǎn)，list-style-type和list-style-position都變化了。

• inherit

inherit是繼承的意思，也就是，article元素下面所有的相鄰子元素都除了unicode-bidi和direction以外的CSS都繼承了<article>元素的CSS。

因此，<h6>, <p>元素還是塊狀的，background-color都是<article>元素的背景色，color顏色也跟<article>一樣，是綠色（文本域的紅色被干掉了）。

不僅上面這些CSS，padding/margin也都繼承了，只是默認(rèn)是0, 看不出來(lái)，我們稍微修改下，例如給<article>元素來(lái)個(gè)margin值：

結(jié)果，那些子元素都開花了：

• unset

unset是取消設(shè)置的意思，也就是，article元素下面所有的相鄰子元素除了unicode-bidi和direction以外的CSS都干掉都不要，不要了那用什么呢？unset值的特性如下，當(dāng)前元素瀏覽器或用戶設(shè)置的CSS忽略，然后如果是具有繼承特性的CSS，如color, 則使用繼承值；如果是沒(méi)有繼承特性的CSS屬性，如background-color, 則使用初始值。

因此，<h6>, <p>元素的display屬性值使用了initial初始值，因此變成了inline元素，兩個(gè)同一行顯示了；而這些元素的color顏色使用了inherit繼承值，因此都是綠色，<textarea>的背景色background-color不具有繼承特性，因此使用的是initial初始值，也就是transparent透明，因此，就是截圖所示效果。

三、結(jié)語(yǔ)

動(dòng)手寫文章之前，還以為這個(gè)CSS屬性會(huì)有意想不到的妙用，最后結(jié)果是，表現(xiàn)確實(shí)意想不到，至于妙用，我只能科科一下。

all所牽扯的CSS實(shí)在是太多了，我目前還是想不出有什么場(chǎng)景，就是要用這個(gè)CSS屬性。或者說(shuō)什么時(shí)候，希望特殊的元素一下子變成普通元素，例如，input輸入框外面一個(gè)div，來(lái)個(gè)input{all:inherit;}，貌似還真有這樣的場(chǎng)景，輸入框不需要border不需要background不需要padding不需要margin, 恩，不錯(cuò)，不枉寫此文了！

更多精彩內(nèi)容在微信公眾平臺(tái)：網(wǎng)頁(yè)設(shè)計(jì)自學(xué)平臺(tái)

干貨！免費(fèi)領(lǐng)取Adobe高級(jí)講師前端教程

點(diǎn)我領(lǐng)取