大檔案上傳和斷點續傳元件

阿新 • • 發佈：2022-04-08

1 CSS 簡介

1.1 什麼是 CSS

全稱為 Cascading Style Sheet ，即層疊級聯樣式表，本質上用來美化網頁

1.2 CSS 優勢

內容和表現分離
網頁結構表現統一，可以實現複用
樣式十分豐富
建議使用獨立的 html 和 css 檔案
利用 SEO ，容易被搜尋引擎收錄

1.3 CSS 匯入方式

1 行內樣式

<h2 color: yellow>標題</h2>

2 內部樣式

<head>
    <style>
        h1 {
            color: blue;
        }
    </style>
</head>

3 外部樣式

h1 {
    color: red;
}

4 各種方式優先順序

各種匯入方式的優先順序採用就近原則，誰離元素更近，誰就生效

2 選擇器

作用：用來選擇頁面上某一個或者某一類元素

2.1 選擇器分類

標籤選擇器：會選擇到這個頁面上所有的該標籤對應的元素

<head>
    <style>
        h1 {
            color: red;
        }
    </style>
</head>

<body>
    <h1>標題</h1>
</body>

類選擇器：會選擇到這個頁面上所有的 class 相同的元素，可以全域性複用和跨標籤

<head>
    <style>
        .my-color {
            color: blue;
        }
    </style>
</head>

<body>
    <h1 class="my-color">標題</h1>
    <p class="my-color">段落</p>
</body>

ID 選擇器：會選擇到這個頁面上所有的 id 相同的元素，必須保證全域性唯一

<head>
    <style>
        #my-color-title {
            color: blue;
        }
        #my-color-prog {
            color: red;
        }
    </style>
</head>

<body>
    <h1 id="my-color-title">標題</h1>
    <h1 id="my-color-prog">段落</h1>
</body>

三種選擇器優先順序：不遵循就近原則，id 選擇器 > class 選擇器 > 標籤選擇器

2.2 層次選擇器

以實現以下的結構為例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>選擇器</title>
</head>
<body>
  <p class="tt">p1</p>
  <p class="acrtive">p2</p>
  <p>p3</p>
  <ul>
      <li>
          <p class="tt">p4</p>
      </li>
      <li>
          <p>p5</p>
      </li>
      <li>
          <p>p6</p>
      </li>
  </ul>
</body>
</html>

實現結果如下：

2.2.1 後代選擇器

定義：在某個元素後面的所有元素（祖爺爺、爺爺、爸爸、我，選擇祖爺爺，那麼祖爺爺後邊的將都被選中）

body p {
    background: red;
}

效果如下：

2.2.2 子選擇器

定義：顧名思義，就是隻選擇兒子

body>p {
    background: blue;
}

效果如下：

2.2.3 相鄰兄弟選擇器

定義：只選擇同輩且同輩必須相鄰（向下相鄰）

.active + p {
    background: blueviolet;
}

效果如下：

2.2.4 通用兄弟選擇器

定義：當前選中的元素向下的所有兄弟元素

.tt~p {
    background: green;
}

效果如下：

2.3 結構偽類選擇器

以下面的結構為例子

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>選擇器</title>
 <link rel="stylesheet" href="../css/style.css">
</head>
<body>
 <p>p1</p>
 <p>p2</p>
 <p>p3</p>
 <ul>
     <li>list1</li>
     <li>list2</li>
     <li>list3</li>
 </ul>
</body>
</html>

/*選中 ul 的第一個子元素*/
ul li:first-child {
    background: green;
}

/*選中 ul 的最後一個子元素*/
ul li:last-child {
    background: blue;
}

/*選中 p1: 定位到父元素，選擇當前的第一個元素
選擇當前 p 元素的父級元素，然後選中父元素的第一個子元素，並且是當前元素才會生效！*/
p:nth-child(1){
    background: red;
}

/*選中父元素下的第二個 p 元素*/
p:nth-last-of-type(2){
    background: yellow;
}

效果如下：

2.4 屬性選擇器

以下方的為例

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>屬性選擇器</title>
 <link rel="stylesheet" href="../css/style.css">
</head>
<body>
<p class="demo">
 <a href="http://www.baidu.com" class="links item first" id="first">1</a>
 <a href="http://www.bilibili.com" class="links item active" target="_blank" title="test">2</a>
 <a href="images/123.html" class="links item">3</a>
 <a href="images/123.png" class="links item">4</a>
 <a href="images/123.jpg" class="links item">5</a>
 <a href="abc" class="links item">6</a>
 <a href="/a.pdf" class="item" id="seven">7</a>
 <a href="/abc.pdf" class="links item">8</a>
 <a href="abc.doc" class="links item">9</a>
 <a href="abcd.doc" class="item last">10</a>
</p>
</body>
</html>

.demo a {
     float: left;
     display: block;
     height: 30px;
     width: 30px;
     border-radius: 10px;
     border-style: solid;
     text-align: center;
     color: #000000;
     text-decoration: none;
     margin-right: 5px;
     font: bold 10px/30px Arial;
}

初始效果如下：

選中具有 id 屬性的元素

a[id] {
    background: #0045ff;
}

選中 id 等於 first 的元素

a[id=first] {
    background: yellow;
}

選中 class 中包含 links 的元素

a[class*="links"] {
    background: red;
}

選中 href 以 http 開頭的元素

a[href^=http] {
    background: blueviolet;
}

選中 href 以 pdf 結尾的元素

a[href$=pdf] {
    background: green;
}

3 美化網頁元素

3.1 美化字型

元素	功能	元素	功能
font-family	字型樣式	font-size	字型大小
color	字型顏色	font-weight	字型粗細

3.2 文字樣式

元素	功能	元素	功能
text-align	文字排版	text-indent	首行縮排
line-height	行高	overline	上劃線
line-through	中劃線	underline	下劃線

3.3 文字陰影

text-shadow ：一共四個引數，分別為陰影顏色、水平偏移、垂直偏移、陰影半徑

3.4 美化列表

以京東的首頁商品列表為例，實現與之類似的效果

按照正常的列表寫法進行實現

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>美化網頁元素</title>
    <link rel="stylesheet" href="../css/1.css">
</head>
<body>
<div id="nav">
    <div>
        <p class="goods-title">全部商品列表</p>
    </div>
    <ul>
        <li><a href="#">家用電器</a></li>
        <li><a href="#">手機</a>&nbsp;/&nbsp;<a href="#">運營商</a>&nbsp;/&nbsp;<a href="#">數碼</a></li>
        <li><a href="#">電腦</a>&nbsp;/&nbsp;<a href="#">電腦</a></li>
        <li><a href="#">家居</a>&nbsp;/&nbsp;<a href="#">傢俱</a>&nbsp;/&nbsp;<a href="#">家裝</a>&nbsp;/&nbsp;<a href="#">廚具</a></li>
        <li><a href="#">男裝</a>&nbsp;/&nbsp;<a href="#">女裝</a>&nbsp;/&nbsp;<a href="#">童裝</a>&nbsp;/&nbsp;<a href="#">內衣</a></li>
        <li><a href="#">美妝</a>&nbsp;/&nbsp;<a href="#">個護清潔</a>&nbsp;/&nbsp;<a href="#">寵物</a></li>
    </ul>
</div>
</body>
</html>

效果如下：

可以看到，效果完全不一樣：每行剛開始有圓點、字型有下劃線、字型顏色不是黑色、背景顏色，那麼，如何修改？

.goods-title {
    margin-left: 20px;
    text-indent: 2em;
    line-height: 28px;
    font-weight: bold;
}

ul li {
    width: 190px;
    height: 25px;
    list-style: none;
    text-indent: 1.5em;
}

a {
    text-decoration: none;
    color: black;
    font-size: 14px;
}

a:hover {
    color: #ffba96;
    text-decoration: underline;
}

4 盒子模型

4.1 什麼是盒子模型

網頁上隨便一個元素都具有盒子模型，類似下圖

屬性名	意義	屬性名	意義	屬性名	意義
`margin`	外邊距	`border`	邊框	`padding`	內邊距

4.2 邊框 border

邊框 border 有三個基本屬性：border: 寬度,樣式,顏色

border: 2px solid #000;

4.3 外邊距 margin

外邊距一共有四個屬性：margin: 上,右,下,左 （順時針轉一圈）

margin: 0;		/*上下左右均為 0*/
margin: 0 2px;	/*上下為 0, 左右為 2px*/
margin: 0 1px 2px 3px;	/*上，右，下，左分別為 0. 1px, 2px, 3px*/

4.4 內邊距 padding

內邊距一共有四個屬性：padding: 上,右,下,左 （順時針轉一圈）

padding: 0;		/*上下左右均為 0*/
padding: 0 2px;	/*上下為 0, 左右為 2px*/
padding: 0 1px 2px 3px;	/*上，右，下，左分別為 0. 1px, 2px, 3px*/

4.5 圓角邊框

圓角邊框也有四個屬性，分別是左上、右上、右下、左下（左上開始順時針轉一圈）

.app{
    width: 50px;
    height: 50px;
    border: 5px solid red;
    border-radius: 20px 10px;
}

.app{
    width: 50px;
    height: 50px;
    border: 5px solid red;
    border-radius: 30px 20px 10px 0;
}

.app{
    width: 50px;
    height: 50px;
    border: 5px solid red;
    border-radius: 10px;
}

4.6 盒子陰影

陰影一共四個基本屬性：box-shadow: X偏移,Y偏移,羽化半徑,顏色

.app{
   width: 50px;
   height: 50px;
   border: 5px solid red;
   border-radius: 10px;
   box-shadow: 10px 10px 5px blue;
}

5 display 和浮動

5.1 display

div 預設為塊元素，span 預設為行內元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <link rel="stylesheet" href="../css/1.css">
</head>
<body>
<div>div塊元素</div>
<span>span行內元素</span>
</body>
</html>

div{
    width: 100px;
    height: 100px;
    border: 2px solid red;
}

span{
    width: 100px;
    height: 100px;
    border: 2px solid red;
}

dispaly 常用的一共擁有以下幾種屬性：

block：塊元素

div{
    width: 100px;
    height: 100px;
    border: 2px solid red;
}

span{
    width: 100px;
    height: 100px;
    border: 2px solid red;
    display: block;
}

inline：行內元素

div{
    width: 100px;
    height: 100px;
    border: 2px solid red;
    display: inline;
}

span{
    width: 100px;
    height: 100px;
    border: 2px solid red;
}

inline-block：仍然是塊元素，但是可以顯示在同一行

div{
    width: 100px;
    height: 100px;
    border: 2px solid red;
    display: inline-block;
}

span{
    width: 100px;
    height: 100px;
    border: 2px solid red;
}

none：不顯示

div{
    width: 100px;
    height: 100px;
    border: 2px solid red;
    display: none;
}

span{
    width: 100px;
    height: 100px;
    border: 2px solid red;
}

這是設定網頁元素排版的一種方式，但是經常使用的一般為下方即將提到的 float 方式

5.2 浮動

以下面的一個例子為例

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>浮動</title>
 <link rel="stylesheet" href="../css/2.css">
</head>
<body>
<div class="demo">
 <div class="label-01">
     <img src="../resources/image/test-01.jpg" alt="" width="300px" height="170px">
 </div>
 <div class="label-02">
     <img src="../resources/image/test-02.png" alt="" width="170px" height="100px">
 </div>
 <div class="label-03">
     <img src="../resources/image/test-03.jpg" alt="" width="400px" height="230px">
 </div>
 <div class="label-04">
     浮動的盒子可以向左、向右浮動，直到外邊緣觸碰到包含框或者另一個盒子為止
 </div>
</div>
</body>
</html>

div {
 margin: 10px;
 padding: 5px;
}

.demo {
 border: 1px solid #000;
}

.label-01 {
 border: 1px #f00 dashed;
 display: inline-block;
}

.label-02 {
 border: 1px #245ef5 dashed;
 display: inline-block;
}

.label-03 {
 border: 1px #1ce376 dashed;
 display: inline-block;
}

.label-04 {
 border: 1px #f3a163 dashed;
 display: inline-block;
}

現在，我們將圖一設定為左浮動，圖二設定為右浮動，為了清楚，我們註釋掉圖三，發現確實是浮動於 div 之上的

.label-01 {
    border: 1px #f00 dashed;
    display: inline-block;
    float: left;
}

.label-02 {
    border: 1px #245ef5 dashed;
    display: inline-block;
    float: right;
}

如果將兩個都設定為向左浮動，那麼圖二遇到圖一所在的盒子邊框後才會停下

.label-01 {
    border: 1px #f00 dashed;
    display: inline-block;
    float: left;
}

.label-02 {
    border: 1px #245ef5 dashed;
    display: inline-block;
    float: left;
}

加入讓三張圖片以及文字都向左浮動，會是什麼樣呢？

.label-01 {
    border: 1px #f00 dashed;
    display: inline-block;
    float: left;
}

.label-02 {
    border: 1px #245ef5 dashed;
    display: inline-block;
    float: left;
}

.label-03 {
    border: 1px #1ce376 dashed;
    display: inline-block;
    float: left;
}

.label-04 {
    border: 1px #f3a163 dashed;
    display: inline-block;
    float: left;
}

此時，如果當我們改變瀏覽器頁面比例時，會發現圖片及文字的排版完全錯亂了

這不是我們想要的，那麼怎麼清除浮動呢？接下來將會學習清除浮動

5.3 父級邊框塌陷問題

清除浮動的型別

clear: right		//右側不允許有浮動
claer: left		//左側不允許有浮動
clear: both		//兩側不允許有浮動
clear: none		//都不允許有浮動

通過5.2 的例子可以看到，當我們改變浮動型別時，父級元素 div 的邊框會出現塌陷的問題，那麼怎麼解決？

5.3.1 增加父元素高度

將父級元素設定一個高度，該高度大於所有浮動後元素的高度

.demo {
    border: 1px solid #000;
    height: 300px;
}

5.3.2 增加空 div

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮動</title>
    <link rel="stylesheet" href="../css/2.css">
</head>
<body>
<div class="demo">
    <div class="label-01">
        <img src="../resources/image/test-01.jpg" alt="" width="300px" height="170px">
    </div>
    <div class="label-02">
        <img src="../resources/image/test-02.png" alt="" width="170px" height="100px">
    </div>
    <div class="label-03">
        <img src="../resources/image/test-03.jpg" alt="" width="300px" height="180px">
    </div>
    <div class="label-04">
        浮動的盒子可以向左、向右浮動，直到外邊緣觸碰到包含框或者另一個盒子為止
    </div>
    <!--清除浮動的 div -->
    <div class="clear-float"></div>
</div>
</body>
</html>

div {
    margin: 10px;
    padding: 5px;
}

.demo {
    border: 1px solid #000;
}

.label-01 {
    border: 1px #f00 dashed;
    display: inline-block;
    float: left;
}

.label-02 {
    border: 1px #245ef5 dashed;
    display: inline-block;
    float: left;
}

.label-03 {
    border: 1px #1ce376 dashed;
    display: inline-block;
    float: left;
}

.label-04 {
    border: 1px #f3a163 dashed;
    display: inline-block;
    float: left;
}

/*清除浮動的 div */
.clear-float {
    clear: both;
    margin: 0;
    padding: 0;
}

可以發現，父級邊框塌陷問題成功解決

5.3.3 使用 overflow

.demo {
    border: 1px solid #000;
    overflow: hidden;
}

當我們改變瀏覽器頁面比例的時候，仍然不會發生塌陷問題

5.3.4父類增加一個偽類

.demo {
    border: 1px solid #000;
}

.demo:after{
    content: '';
    display: block;
    clear: both;
}

小結：

浮動元素後邊增加空 div：不推薦，程式碼中儘量不使用空 div
設定父元素高度：不推薦，假設元素有了固定高度，就會被限制
使用 overflow：不推薦，下拉的一些場景避免使用
父類增加一個偽類：推薦，沒有副作用

6 定位

6.1 相對定位

以下面的例子為例

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>相對定位</title>
 <link rel="stylesheet" href="../css/3.css">
</head>
<body>
<div id="father">
 <div class="first">第一個盒子</div>
 <div class="second">第二個盒子</div>
 <div class="third">第三個盒子</div>
</div>
</body>
</html>

body {
 margin: 20px;
 padding: 10px;
}

div {
 padding: 5px;
 margin: 3px;
}

#father {
 width: 200px;
 border: 2px solid #ff0000;
 padding: 10px;
 margin: 10px;
}

.first {
 border: 1px dashed #36ff4d;
 background-color: #99990d;
}

.second {
 border: 1px dashed #1754ee;
 background-color: #175499
}

.third {
 border: 1px dashed #f900ff;
 background-color: #f12380;
}

效果如下

下面使用相對定位，第一個盒子向上移動 20px，向右移動 30px；第二個盒子保持不動；第三個盒子向左移動 20px，向下移動 30px

.first {
    border: 1px dashed #36ff4d;
    background-color: #99990d;
    position: relative;
    top: -20px;
    left: 30px;
}

.third {
    border: 1px dashed #f900ff;
    background-color: #f12380;
    position: relative;
    right: 20px;
    bottom: -30px;
}

總結： 相對定位使用 position: relative 描述，相對於該元素原來的位置進行偏移，原來的位置會被保留！（相對定位後的偏移，仍然屬於標準文件流，因為父級元素的邊框沒有塌陷，不是浮動）

練習：使用 div 和 a 標籤設計如下頁面，要求滿足：

每個超連結寬度和高度都是 100px，背景顏色都是粉色，滑鼠指標移動上去變為綠色

使用相對定位改變每個超連結的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相對定位練習</title>
    <link rel="stylesheet" href="../css/4.css">
</head>
<body>
<div id="father">
    <div class="first"><a href="#">連結1</a></div>
    <div class="second"><a href="#">連結2</a></div>
    <div class="third"><a href="#">連結3</a></div>
    <div class="fourth"><a href="#">連結4</a></div>
    <div class="fifth"><a href="#">連結5</a></div>
</div>
</body>
</html>

body {
    margin: 20px;
    padding: 20px;
}

#father {
    width: 320px;
    height: 320px;
    margin: 10px;
    border: 2px solid red;
}

div[class] {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: #fdb4ff;
    text-align: center;
}

a {
    color: #fff;
    text-decoration: none;
    position: relative;
    top: 35px
}

div[class]:hover {
    background-color: #66ff8b;
}

.first {
    position: relative;
    left: 10px;
    top: 10px
}

.second {
    position: relative;
    left: 210px;
    top: -90px
}

.third {
    position: relative;
    bottom: -10px;
    left: 10px;
}

.fourth {
    position: relative;
    top: -90px;
    right: -210px;
}

.fifth {
    position: relative;
    top: -290px;
    left: 110px;
}

6.2 絕對定位

仍然以 6.1 的三個盒子為例

沒有父級元素的前提下，相對於瀏覽器進行定位

/*父級元素未使用定位*/
.third {
    border: 1px dashed #f900ff;
    background-color: #f12380;
    position: absolute;
    top: 10px;
}

假設父級元素存在定位，我們通常會相對於父級元素進行偏移

#father {
    width: 200px;
    border: 2px solid #ff0000;
    padding: 10px;
    margin: 10px;
    position: relative;		/*父級元素使用了定位*/
}

.third {
    border: 1px dashed #f900ff;
    background-color: #f12380;
    position: absolute;
    top: 15px;
}

在父級元素之內進行偏移
相對於父級元素或者瀏覽器的位置進行偏移，絕對定位不在標準文件流中，原來的位置不會被保留

6.3 固定定位

固定定位：顧名思義，就是一直固定在某一個位置，不管怎麼改變，位置都不變

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <link rel="stylesheet" href="../css/5.css">
</head>
<body>
    <div>我是絕對定位</div>
    <div>我是固定定位</div>
</body>
</html>

body {
    height: 2000px;
}

div:nth-of-type(1) {
    font-size: 10px;
    width: 100px;
    height: 100px;
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: red;
}

div:nth-of-type(2) {
    font-size: 8px;
    width: 50px;
    height: 50px;
    background-color: #36ff4d;
    position: fixed;
    right: 0;
    bottom: 0;
}

初始介面，兩個 div 都在瀏覽器右下角處

滑動滾動條，可以看到，絕對定位的 div 發生了移動，而固定定位仍然保持不變

6.5 Z-index 和透明度

z-index 類似於 PS 中的圖層概念，通過設定 z-index 的值來控制元素之間的層級關係

以如下情況為例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Z-index</title>
    <link rel="stylesheet" href="../css/6.css">
</head>
<body>
<div id="father">
    <ul>
        <li><img src="../resources/image/bg.jpg" alt=""></li>
        <li class="tipText">UP : 蘇蘇思量</li>
        <li class="tipBg"></li>
        <li>時間 : 2022-04-12</li>
        <li>地點 : 小破站學習區</li>
    </ul>
</div>
</body>
</html>

#father {
    width: 250px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-size: 12px;
    font-weight: bold;
    line-height: 25px;
    border: 1px solid #05212f;
}

#father ul {
    position: relative;
}

ul, li {
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}

.tipBg, .tipText {
    position: absolute;
    width: 250px;
    height: 25px;
    top: 111px;
}

img {
    width: 250px;
    height: 135px;
}

.tipBg {
    z-index: 1;		//背景遮罩
    background-color: #383838;
}

.tipText {
    color: white;
    z-index: 2;		//文字
}

這樣情況下，文字的 z-index == 2，背景遮罩的 z-index == 1，因為文字的 z-index 值大於背景遮罩，所以文字會顯示在背景上方

然後改變背景遮罩的 z-index 值，使其大於文字的 z-index，這樣背景遮罩就遮住了文字

.tipBg {
    z-index: 3;		//背景遮罩
    background-color: #383838;
}

.tipText {
    color: white;
    z-index: 2;		//文字
}

接下來我們改變背景遮罩的透明度為 0.5，可以看到，文字確實在遮罩下方

.tipBg {
    z-index: 3;
    background-color: #383838;
    opacity: 0.5;
    /*IE8 之前支援下方的寫法*/
    /*filter: Alpha(opacity=50)*/
}

Vue 大檔案上傳和斷點續傳的實現

檔案上傳的 2 套方案基於檔案流（form-data） element-ui 框架的上傳元件，就是預設基於檔案流的。

大檔案上傳和斷點續傳

簡要思路為什麼大檔案上傳需要做特殊處理呢？檔案的上傳，是通過一個 POST 提交表單，把檔案的二進位制資料寫在請求裡面來發送的。對於主流的 Web 伺服器，一般都會有一個請求體 body 的大小限制，比如限制在 2MB 以

大檔案上傳和斷點續傳切片

4GB以上超大檔案上傳和斷點續傳伺服器的實現隨著視訊網站和大資料應用的普及，特別是高清視訊和4K視訊應用的到來，超大檔案上傳已經成為了日常的基礎應用需求。

大檔案上傳和斷點續傳分塊

需求：專案要支援大檔案上傳功能，經過討論，初步將檔案上傳大小控制在20G內，因此自己需要在專案中進行檔案上傳部分的調整和配置，自己將大小都以20G來進行限制。

大檔案上傳和斷點續傳分片

1 背景使用者本地有一份txt或者csv檔案，無論是從業務資料庫匯出、還是其他途徑獲取，當需要使用螞蟻的大資料分析工具進行資料加工、挖掘和共創應用的時候，首先要將本地檔案上傳至ODPS，普通的小檔案通過瀏覽

大檔案上傳和斷點續傳討論

最近遇見一個需要上傳超大大檔案的需求，調研了七牛和騰訊雲的切片分段上傳功能，因此在此整理前端大檔案上傳相關功能的實現。

大檔案上傳和斷點續傳疑惑

一、功能性需求與非功能性需求要求操作便利，一次選擇多個檔案和資料夾進行上傳；

大檔案上傳和斷點續傳疑問

一、概述所謂斷點續傳，其實只是指下載，也就是要從檔案已經下載的地方開始繼續下載。在以前版本的HTTP協議是不支援斷點的，HTTP/1.1開始就支援了。一般斷點下載時才用到Range和Content-Range實體頭。HTTP協議

大檔案上傳和斷點續傳思路

我們平時經常做的是上傳檔案，上傳資料夾與上傳檔案類似，但也有一些不同之處，這次做了上傳資料夾就記錄下以備後用。

大檔案上傳和斷點續傳功能

大檔案上傳和斷點續傳解決方案

資料夾資料庫處理邏輯 public class DbFolder { JSONObject root; public DbFolder()

大檔案上傳和斷點續傳方案

大檔案上傳和斷點續傳例項解析

javaweb上傳檔案上傳檔案的jsp中的部分上傳檔案同樣可以使用form表單向後端發請求，也可以使用 ajax向後端發請求

大檔案上傳和斷點續傳例項

最近遇見一個需要上傳超大大檔案的需求，調研了七牛和騰訊雲的切片分段上傳功能，因此在此整理前端大檔案上傳相關功能的實現。

大檔案上傳和斷點續傳資源

大檔案上傳和斷點續傳程式碼

一、功能性需求與非功能性需求要求操作便利，一次選擇多個檔案和資料夾進行上傳；

大檔案上傳和斷點續傳原始碼

需求：支援大檔案批量上傳（20G）和下載，同時需要保證上傳期間使用者電腦不出現卡死等體驗；

大檔案上傳和斷點續傳外掛

javaweb上傳檔案上傳檔案的jsp中的部分上傳檔案同樣可以使用form表單向後端發請求，也可以使用 ajax向後端發請求

大檔案上傳和斷點續傳控制元件

最近遇見一個需要上傳超大大檔案的需求，調研了七牛和騰訊雲的切片分段上傳功能，因此在此整理前端大檔案上傳相關功能的實現。

大檔案上傳和斷點續傳元件

1 CSS 簡介

1.1 什麼是 CSS

1.2 CSS 優勢

1.3 CSS 匯入方式

2 選擇器

2.1 選擇器分類

2.2 層次選擇器

2.2.1 後代選擇器

2.2.2 子選擇器

2.2.3 相鄰兄弟選擇器

2.2.4 通用兄弟選擇器

2.3 結構偽類選擇器

2.4 屬性選擇器

3 美化網頁元素

3.1 美化字型

3.2 文字樣式

3.3 文字陰影

3.4 美化列表

4 盒子模型

4.1 什麼是盒子模型

4.2 邊框 border

4.3 外邊距 margin

4.4 內邊距 padding

4.5 圓角邊框

4.6 盒子陰影

5 display 和浮動

5.1 display

5.2 浮動

5.3 父級邊框塌陷問題

5.3.1 增加父元素高度

5.3.2 增加空 div

5.3.3 使用 overflow

5.3.4父類增加一個偽類

6 定位

6.1 相對定位

6.2 絕對定位

6.3 固定定位

6.5 Z-index 和透明度

相關推薦