TML5 文件上傳下載的實(shí)例代碼，WEBUPLOADER之大文件分段上傳、斷點(diǎn)續(xù)傳，HTML DOM INPUT FILE 大文件上傳源代碼，B/S大附件上傳，支持?jǐn)帱c(diǎn)續(xù)傳，VUE處理文件流實(shí)現(xiàn)上傳下載，VUE 上傳大型文件插件(VUE上傳視頻插件)

之前在網(wǎng)上也搜索過相關(guān)的資料，在論壇里面也與網(wǎng)絡(luò)交流過，但是給出的方案都不太令人滿意。一方面論壇里面的網(wǎng)頁都沒有真實(shí)的項(xiàng)目經(jīng)驗(yàn)。幾乎大部分的網(wǎng)頁都是在紙上談兵，很多問題完全是憑想象在回答。也不能夠提供真實(shí)案例，基本上都沒有項(xiàng)目的實(shí)戰(zhàn)經(jīng)驗(yàn)。

甚至有些學(xué)生也在里面不知道從哪里復(fù)制的一些代碼然后粘貼在上面。

后端PHP5,PHP6,PHP7,PHP8，ThinkPHP，

服務(wù)器支持Linux，Windows,macOS,CentOS,中標(biāo)麒麟，銀河麒麟，統(tǒng)信，龍芯，華為鯤鵬，

數(shù)據(jù)庫支持MySQL，達(dá)夢數(shù)據(jù)庫，人大金倉

需要提供前端源碼，后端源碼，控件源碼

需要提供7*24小時(shí)技術(shù)支持，長期技術(shù)支持，長期維護(hù)服務(wù)

需要提供手機(jī)，QQ，微信，企業(yè)微信，電子郵箱等聯(lián)系方式

需要支持包含IE在內(nèi)的全部瀏覽器

終端需要支持Windows,macOS,Linux,信創(chuàng)國產(chǎn)化環(huán)境，中標(biāo)麒麟，銀河麒麟，統(tǒng)信UOS，龍芯，華為

功能需要支持10G，50G,100G大文件上傳和斷點(diǎn)續(xù)傳，刷新續(xù)傳，重啟續(xù)傳

文件夾包含1W，10W，100W個(gè)文件和層級(jí)結(jié)構(gòu)

支持超大文件分片，分段，分塊，分割上傳下載，斷點(diǎn)續(xù)傳

支持文件夾上傳，下載斷點(diǎn)續(xù)傳，支持文件夾層級(jí)結(jié)構(gòu)，層級(jí)結(jié)構(gòu)信息保存到數(shù)據(jù)庫，下載的時(shí)候同樣保留層級(jí)結(jié)構(gòu)

支持加密上傳，下載加密，端到端加密，國密SM4加密算法，數(shù)據(jù)加密傳輸，傳輸過程中要保證數(shù)據(jù)是加密的。1.下載示例

https://gitee.com/xproer/up6-vue-cli

將up6組件復(fù)制到項(xiàng)目中

示例中已經(jīng)包含此目錄

1.引入up6組件

2.配置接口地址

接口地址分別對(duì)應(yīng)：文件初始化，文件數(shù)據(jù)上傳，文件進(jìn)度，文件上傳完畢，文件刪除，文件夾初始化，文件夾刪除，文件列表

參考：http://www.ncmem.com/doc/view.aspx?id=e1f49f3e1d4742e19135e00bd41fa3de

3.處理事件

啟動(dòng)測試

啟動(dòng)成功

效果

數(shù)據(jù)庫

源碼工程文檔：https://drive.weixin.qq.com/s?k=ACoAYgezAAw1dWofra

源碼報(bào)價(jià)單：https://drive.weixin.qq.com/s?k=ACoAYgezAAwoiul8gl

OEM版報(bào)價(jià)單：https://drive.weixin.qq.com/s?k=ACoAYgezAAwuzp4W0a

控件源碼下載：https://drive.weixin.qq.com/s?k=ACoAYgezAAwbdKCskc

一章html常用標(biāo)簽

1.HBuilder的使用

項(xiàng)目管理器找不到怎么辦？

答：快捷鍵F9,或者視圖--》顯示視圖--》項(xiàng)目管理器

如何預(yù)覽自己的項(xiàng)目？

答：ctrl+p預(yù)覽與編輯進(jìn)行切換

如何修改HBuilder的編碼方式？

答：工具-》選項(xiàng)-》常規(guī)-》工作空間-》編碼方式設(shè)置

2. HBuilder的建立項(xiàng)目

3. 什么是網(wǎng)頁？什么是網(wǎng)站？什么是靜態(tài)網(wǎng)頁？什么是動(dòng)態(tài)網(wǎng)頁？

4. 網(wǎng)頁和瀏覽器的關(guān)系

5. 網(wǎng)頁的基本結(jié)構(gòu)

注意：標(biāo)簽寫的時(shí)候，不注意區(qū)分大小寫；

標(biāo)簽都是成對(duì)出現(xiàn)，開始標(biāo)簽，閉合結(jié)束標(biāo)簽；

6. head具體講解

title是網(wǎng)頁的標(biāo)題

使用記事本：

最常見的兩種：ANSII（Windows系統(tǒng)里的中文編碼） gb2312 utf-8

注意：用什么編碼方式寫的就用編碼方式呈現(xiàn)；

7. 常用的標(biāo)簽

標(biāo)題標(biāo)簽

<h1>--<h6>

段落標(biāo)簽<p></p>

換行標(biāo)簽<br/>

格式化標(biāo)簽<center>

<ol>[order list]:type可以改變序列編號(hào) 1 a I

<li>[list item]

<ul>[unorder list] :type =" circle（空心的圓圈） square（實(shí)心的方塊） disc（實(shí)心的圓圈）"

<dl><dt></dt><dd></dd></dl> :<dl>-->description list--》自定義格式標(biāo)簽 <dt> title <dd>description

<pre>-->預(yù)定義格式標(biāo)簽 就是在源碼里是什么格式在頁面顯示的就是什么格式

分割線<hr>

文本標(biāo)簽：

格式：加粗b-->bold 傾斜i-->italic 下劃線u-->underline 上標(biāo)sup-->superscript 下標(biāo) sub-->subscript

文字 <font size="" face="" color=""></font>

圖像標(biāo)簽

圖片格式：bmp--》windows位圖，用于電腦墻紙

GIF--》動(dòng)圖

jpeg或jpg--》最常用的圖片格式，網(wǎng)絡(luò)支持，文件尺寸小，下載速度塊

png--》支持性不強(qiáng)

<img src=”” width=”” height=”” align=””/>

src-->這是相對(duì)路徑

相對(duì)路徑：目標(biāo)相對(duì)于當(dāng)前文件的路徑；

絕對(duì)路徑就是包含盤符的就是絕對(duì)路徑；

相對(duì)路徑就是相對(duì)于html文件的路徑；

width--》寬度 height--》高度

align--》用來控制帶有文字包圍的圖像的對(duì)齊方式

left right bottom Middle top

例子

超鏈接標(biāo)簽

超鏈接到某個(gè)網(wǎng)站地址；

超鏈接到某個(gè)頁面；

超鏈接到某個(gè)錨點(diǎn)：本頁面錨點(diǎn) 跨頁面錨點(diǎn)

第二章 表格與表單

1. 表格的作用

整齊的在頁面上顯示各個(gè)元素；同時(shí)可以固定頁面元素的位置；

2. 表單的作用

網(wǎng)頁上的注冊(cè)，就是通過表單元素的提交，把用戶的基本信息保存到數(shù)據(jù)庫里，下次用戶登陸的時(shí)候，可以從數(shù)據(jù)庫里拿出用戶信息，然后進(jìn)行比較，如果比較相等則登陸成功，如果比較發(fā)現(xiàn)不相等則說明該用戶還么有注冊(cè)，則需要注冊(cè)后再登陸；

這也就是交互性

3. 表格

(1) 表格的基本結(jié)構(gòu)

根標(biāo)簽--》><table></table>

行標(biāo)簽-->tr【table row】標(biāo)簽必須放在根標(biāo)簽里<table>里面，有幾行就有幾對(duì)tr標(biāo)簽；

單元格標(biāo)簽--》td【table data】該表格有幾列，就有幾對(duì)td,注意td一定要放在tr里面

標(biāo)題--》caption，注意必須緊挨著table標(biāo)簽，一個(gè)表格只有一個(gè)caption標(biāo)簽

表頭--》th【table head】加粗并且居中

(2) 表格的屬性

寬--》width

高--》height

邊框--》border

背景圖片--》background

背景顏色--》bgcolor

居中-->align left right center注意：如果設(shè)置在table標(biāo)簽上，則是表格的對(duì)齊方式，如果設(shè)置在tr，td上則是文本的對(duì)齊方式

單元格的背景可以覆蓋掉行的背景覆蓋掉表格的背景

(3) 跨多行跨多列

跨多列：colspan

跨多行：rowspan

(4) 表格的嵌套

4. 表單

表單的結(jié)構(gòu)

<form></form>

form標(biāo)簽的屬性

action：填寫的是該表單填寫完畢后要提交的目的地；

method:get/post: get方式能夠把要提交的內(nèi)容顯示到URL后面；

post方式不可以把提交的內(nèi)容顯示到URL的后面，所以說更加安全；

method-》方式，方法；表單提交的是什么；常用的form表單元素

1. 單行文本框：

<input type="text" name="" value="" size="" maxlength=""/>

type-->指定具體是什么元素；

name-->指定該元素的名字，用來區(qū)別提交的信息；

value-->用來指定初始默認(rèn)的值；

size-->用來指定文本框顯示字符的長度；比如說size = 5 代表最多顯示5個(gè)字符；

maxlength->用來指定最多能輸入多少個(gè)；比如說maxlength = 4代表最多只能輸入4個(gè)字符

2. 密碼框

<input type="password" name="password"/>

3. 多行文本框

<textarea cols="" rows="" name=""></textarea>

rows-->指定高度；cols-->指定寬度；col->column 列越多越寬，行越多越高；

4. 單選按鈕

注意：

單選按鈕是一組相互排斥的值

單選按鈕的name必須一樣；

當(dāng)我選中男的時(shí)候，提交給服務(wù)器的就是sex = '男'（value）

5. 復(fù)選框

<input type="checkbox" name="hobby" value="swim" />游泳

<input type="checkbox" name="hobby" value="read" checked=‘checked’ />讀書

<input type="checkbox" name="hobby" value="sleep" />睡覺

<input type="checkbox" name="hobby" value="playgame" />玩游戲

<input type="checkbox" name="hobby" value="run" />跑步

<input type="checkbox" name="hobby" value="shopping" />購物

復(fù)選框的name也必須一樣；提交給服務(wù)器的是選中的復(fù)選框的value值；

6. 下拉列表框

<select name="edu">

<option value="初中">初中</option>

<option value="高中">高中</option>

<option value="大學(xué)">大學(xué)</option>

</select>

select提交的值就是選中的復(fù)選框的value值

7. 文件域

<input type="file" />

8. 按鈕

<input type="submit" value="提交" />提交按鈕本身自帶提交動(dòng)作；

<input type="reset" value="重置" />本身自帶重置的動(dòng)作；

<input type=”button” value=”普通按鈕”/>普通按鈕不帶有任何動(dòng)作；

<input type="image" src="img/timg2.jpg"/>圖片按鈕也具有提交的功能；對(duì)value沒有任何效果；