整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
嘍大家好，我是胖達(dá)。本期視頻來看看路徑相關(guān)的內(nèi)容。我們知道在網(wǎng)頁中存在很多的圖片，如果把這些圖片和html文檔放在一起，這樣不光不美觀，管理起來也非常不方便。通常會(huì)新建一個(gè)專門用來管理圖像資源的文件夾，當(dāng)需要查找圖像的時(shí)候就會(huì)選擇使用路徑的方式來指定圖像文件的位置。
路徑的類型又分為兩種，第一種是相對路徑，第二種是絕對路徑。今天先來了解一下相對路徑。相對路徑是相對于當(dāng)前文件的位置來表示資源，也就是圖片位置的路徑表達(dá)方式。簡單來說就是圖片相對于當(dāng)前html文檔的位置。這里把相對路徑的分類給大家列出來了，一個(gè)一個(gè)往下看。
·首先是同級路徑。同級路徑不需要在html里面寫任何符號，只需要將文件名寫到html屬性里就可以了。在代碼里看一下，這里有一個(gè)image，點(diǎn)jpg的圖片和html文檔處于同一級，所以在html的屬性里直接寫image，點(diǎn)jpg保存一下看看效果。
可以看到現(xiàn)在圖片是正常展示的，同級路徑下只需要在html屬性里完整填寫圖像文件的名稱就可以了。
·再來看第二個(gè)下級路徑。當(dāng)圖像文件位于html文件下一集時(shí)，需要在html屬性里完整填寫同級文件夾的名稱，然后斜杠寫出對應(yīng)圖片文件的名稱。
→首先打開資源文件夾，在這里新增一個(gè)images的文件夾。將image圖片文件復(fù)制一份放到images文件夾里。
→打開vscode，新建一個(gè)gtml文檔，這里新增一個(gè)image標(biāo)簽。
→在左側(cè)資源管理器中剛剛新增的images文件夾已經(jīng)顯示出來了，打開以后會(huì)發(fā)現(xiàn)里面有一個(gè)image，點(diǎn)jpg的圖片。把這個(gè)路徑寫一下，在src屬性里面寫入位于當(dāng)前html文件同級的images文件夾的名稱，使用符號斜杠找到image，點(diǎn)gpg，看一下效果。此時(shí)圖片也完整顯示出來了。
→如果在amager四文件夾里還有一個(gè)amager四文件夾，下級路徑又該怎么寫？在amager文件夾里再新建一個(gè)文件夾，打開vscod，在左側(cè)的資源管理器中a major s文件夾下面又新增了一個(gè)a major s文件夾，在這里面又放了一張圖片。
這張圖片應(yīng)該怎樣讓它展示出來？一起來看一下。
→首先找到同級的images文件夾，使用符號斜杠，此時(shí)vscode會(huì)提供給兩個(gè)選項(xiàng)，一個(gè)是imagers文件夾，另一個(gè)是imager.gpg。選擇imagers，imagers文件夾里面的imager.gpg的文件了，保存一下看看效果。
在瀏覽器中這兩張圖片都完美的展現(xiàn)出來了。
最后來看一下相對路徑里面的。上級路徑使用的符號是點(diǎn)點(diǎn)杠。上級路徑又應(yīng)該怎么理解？也就是圖像文件是位于當(dāng)前這個(gè) hd ml文件的上一集。
在練習(xí)文件夾里新增一個(gè)名為 hd ml的文件夾，打開vs code，選擇剛剛新增的文件夾，選擇新建文件，這里需要新增一個(gè) hd ml文檔。在當(dāng)前 hd ml文檔中，如果想要調(diào)用上一級的 image 點(diǎn) j p g 的圖片應(yīng)該怎么做？在 sr c 屬性里面使用點(diǎn)點(diǎn)杠。
這里 vs code提供了上一集路徑中存在的文件，選擇 image 點(diǎn) j p g，在瀏覽器中看下效果，此時(shí)圖片也是正常顯示的。如果hd ml文件藏得更深一些，把當(dāng)前的文件復(fù)制一份，新增一個(gè)hd ml文件夾，將復(fù)制的文檔粘貼一下，打開剛剛復(fù)制的文檔，修改sr c屬性里面的值，使用點(diǎn)點(diǎn)杠。
此時(shí)是沒有找到 amage 點(diǎn) j p g 的文件，這個(gè)時(shí)候就需要重復(fù)剛剛的操作，點(diǎn)點(diǎn)杠就能找到需要到的 amage 點(diǎn) jbg 的文件了，保存一下看看效果。這里可以看到圖片還是正常顯示出來了。
本期視頻主要了解了相對路徑的三種分類，一個(gè)是同級路徑，一個(gè)是下級路徑，還有一個(gè)是上級路徑。希望小伙伴們下來可以好好練習(xí)一下，這對于后期的內(nèi)容非常重要。下期再來聊聊絕對路徑。本期的內(nèi)容到此結(jié)束，感謝觀看，下期再見。
歌Chrome中的檢查元素功能可以幫助你查看網(wǎng)頁上特定元素的HTML源代碼。在本教程中，我將向你展示如何使用此功能提取任何網(wǎng)頁的整個(gè)HTML代碼。
網(wǎng)站的HTML源代碼是web瀏覽器用來呈現(xiàn)頁面并根據(jù)頁面上應(yīng)用的HTML、CSS和JS代碼和規(guī)則進(jìn)行顯示的代碼。網(wǎng)站的源代碼，即網(wǎng)站的結(jié)構(gòu)，是公開的，而且必須公開，以便瀏覽器能夠正確顯示。
現(xiàn)代網(wǎng)絡(luò)瀏覽器允許用戶查看他們正在查看的網(wǎng)頁的HTML源代碼。此功能對網(wǎng)頁設(shè)計(jì)者和開發(fā)人員的設(shè)計(jì)和開發(fā)工作特別有用。通過查看網(wǎng)站（或網(wǎng)頁）的HTML源代碼，你可以了解網(wǎng)站的結(jié)構(gòu)、使用的HTML元素以及應(yīng)用的CSS樣式。這不僅是學(xué)習(xí)如何使用HTML和CSS進(jìn)行設(shè)計(jì)和編碼的好方法，也是測試自己的設(shè)計(jì)和檢查結(jié)果頁面上是否有錯(cuò)誤的地方的好方法。
Web瀏覽器中頁面的源代碼通過Ctrl+U鍵盤快捷鍵或右鍵單擊頁面并選擇“查看頁面源代碼”選項(xiàng)來顯示。這顯示了頁面加載時(shí)的完整HTML代碼，它捕獲了頁面的靜態(tài)狀態(tài)，即使頁面具有動(dòng)態(tài)功能，其內(nèi)容也不會(huì)隨著時(shí)間的推移而變化，服務(wù)器端或客戶端也是如此。
要查看動(dòng)態(tài)生成頁面（即通過JS生成的頁面）或具有動(dòng)態(tài)變化內(nèi)容的頁面（即具有不斷變化的新聞流的新聞網(wǎng)站或具有不斷變化界面的社交網(wǎng)絡(luò)）的HTML源代碼，我們可以使用谷歌Chrome的檢查功能，我將在下面詳細(xì)演示。
使用檢查功能查看網(wǎng)頁源代碼的美妙之處在于，你可以查看和獲取在給定時(shí)間完全有效的HTML代碼，這在具有變化和移動(dòng)元素的頁面上非常有用，這些元素會(huì)顯示和消失。
在檢查模式下，你可以對頁面上任何HTML元素的內(nèi)容、屬性和樣式進(jìn)行編輯。不過，這些更改只對你可見，不會(huì)以任何方式對你正在查看的網(wǎng)站進(jìn)行永久更改。
現(xiàn)在，讓我們看看這是如何工作的。
1、啟動(dòng)Chrome瀏覽器，打開你選擇的網(wǎng)頁。
2、右鍵單擊頁面上的任何位置，然后從下拉菜單中選擇“檢查”。也可以使用Ctrl+Shift+I鍵盤快捷鍵。
這將打開瀏覽器窗口右側(cè)或底部的“開發(fā)人員工具”部分，具體取決于你的屏幕大小和布局。
開發(fā)人員工具部分由一個(gè)頂部菜單和下面的兩個(gè)并排窗口組成。在左側(cè)，你將看到頁面的HTML源代碼，這些代碼可以逐個(gè)元素折疊和展開。在右側(cè)，你將看到在左側(cè)選擇的每個(gè)元素的樣式、事件偵聽器和屬性。
你將看到所有當(dāng)前有效的HTML代碼，其中包含所有元素，如標(biāo)題、段落、列表、鏈接、圖像甚至注釋。代碼量將是最小的，它在基本的HTML網(wǎng)頁上沒有復(fù)雜性，因此它將更快地顯示。然而，在高流量、動(dòng)態(tài)的網(wǎng)站上，有很多元素和功能，HTML源代碼將相當(dāng)長和復(fù)雜，因此需要更長的時(shí)間才能完全顯示。
3、轉(zhuǎn)到本節(jié)頂部，找到<html>標(biāo)記，該標(biāo)記通常位于doctype（文檔類型）聲明（例如 <!doctype html>）之后。
4、找到<html>標(biāo)記后，按Ctrl+C或右鍵單擊它，然后選擇復(fù)制>復(fù)制outerHTML以復(fù)制頁面的所有html源代碼。
5、然后，你可以根據(jù)需要將此代碼粘貼到文本或HTML文件中，并對其進(jìn)行進(jìn)一步檢查和編輯。
在檢查模式中，你還將看到內(nèi)聯(lián)樣式和對外部樣式表的引用（如果有的話）。此外，如果你在Chrome中應(yīng)用了任何自定義用戶樣式，它們也將附加到你復(fù)制的HTML代碼的底部。
今年國慶假期終于可以憋在家里了不用出門了，不用出去看后腦了，真的是一種享受。這么好的光陰怎么浪費(fèi)，睡覺、吃飯、打豆豆這怎么可能（耍多了也煩），完全不符合我們程序員的作風(fēng)，趕緊起來把文章寫完。
這篇文章比較基礎(chǔ)，在國慶期間的業(yè)余時(shí)間寫的，這幾天又完善了下，力求把更多的前端所涉及到的關(guān)于文件上傳的各種場景和應(yīng)用都涵蓋了,若有疏漏和問題還請留言斧正和補(bǔ)充。
以下是本文所涉及到的知識點(diǎn)，break or continue ?
原理很簡單，就是根據(jù) http 協(xié)議的規(guī)范和定義，完成請求消息體的封裝和消息體的解析，然后將二進(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 請求的消息體
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryDCntfiXcSkPhS4PN 表示本次請求要上傳文件，其中boundary表示分隔符，如果要上傳多個(gè)表單項(xiàng)，就要使用boundary分割，每個(gè)表單項(xiàng)由———XXX開始，以———XXX結(jié)尾。
每一個(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ā)送請求到服務(wù)器后，服務(wù)器會(huì)收到請求的消息體，然后對消息體進(jìn)行解析，解析出哪是普通表單哪些是附件。
可能大家馬上能想到通過正則或者字符串處理分割出內(nèi)容，不過這樣是行不通的，二進(jìn)制buffer轉(zhuǎn)化為string,對字符串進(jìn)行截取后，其索引和字符串是不一致的，所以結(jié)果就不會(huì)正確，除非上傳的就是字符串。
不過一般情況下不需要自行解析，目前已經(jīng)有很成熟的三方庫可以使用。
至于如何解析，這個(gè)也會(huì)占用很大篇幅，后面的文章在詳細(xì)說。
使用 form 表單上傳文件
在 ie時(shí)代，如果實(shí)現(xiàn)一個(gè)無刷新的文件上傳那可是費(fèi)老勁了，大部分都是用 iframe 來實(shí)現(xiàn)局部刷新或者使用 flash 插件來搞定，在那個(gè)時(shí)代 ie 就是最好用的瀏覽器（別無選擇）。
DEMO
這種方式上傳文件，不需要 js ，而且沒有兼容問題，所有瀏覽器都支持，就是體驗(yàn)很差，導(dǎo)致頁面刷新，頁面其他數(shù)據(jù)丟失。
HTML
<form method="post" action="http://localhost:8100" enctype="multipart/form-data">
選擇文件:
<input type="file" name="f1"/> input 必須設(shè)置 name 屬性，否則數(shù)據(jù)無法發(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)有的庫koa-body結(jié)合 koa2實(shí)現(xiàn)服務(wù)端文件的保存和數(shù)據(jù)的返回。
在項(xiàng)目開發(fā)中，文件上傳本身和業(yè)務(wù)無關(guān)，代碼基本上都可通用。
在這里我們使用koa-body庫來實(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');//文件保存庫
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)文件訪問
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){
//得到擴(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/
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
