「胖達分享」網頁中的圖片和html文檔的路徑

嘍大家好，我是胖達。本期視頻來看看路徑相關的內容。我們知道在網頁中存在很多的圖片，如果把這些圖片和html文檔放在一起，這樣不光不美觀，管理起來也非常不方便。通常會新建一個專門用來管理圖像資源的文件夾，當需要查找圖像的時候就會選擇使用路徑的方式來指定圖像文件的位置。

路徑的類型又分為兩種，第一種是相對路徑，第二種是絕對路徑。今天先來了解一下相對路徑。相對路徑是相對于當前文件的位置來表示資源，也就是圖片位置的路徑表達方式。簡單來說就是圖片相對于當前html文檔的位置。這里把相對路徑的分類給大家列出來了，一個一個往下看。

·首先是同級路徑。同級路徑不需要在html里面寫任何符號，只需要將文件名寫到html屬性里就可以了。在代碼里看一下，這里有一個image，點jpg的圖片和html文檔處于同一級，所以在html的屬性里直接寫image，點jpg保存一下看看效果。

可以看到現在圖片是正常展示的，同級路徑下只需要在html屬性里完整填寫圖像文件的名稱就可以了。

·再來看第二個下級路徑。當圖像文件位于html文件下一集時，需要在html屬性里完整填寫同級文件夾的名稱，然后斜杠寫出對應圖片文件的名稱。

→首先打開資源文件夾，在這里新增一個images的文件夾。將image圖片文件復制一份放到images文件夾里。

→打開vscode，新建一個gtml文檔，這里新增一個image標簽。

→在左側資源管理器中剛剛新增的images文件夾已經顯示出來了，打開以后會發現里面有一個image，點jpg的圖片。把這個路徑寫一下，在src屬性里面寫入位于當前html文件同級的images文件夾的名稱，使用符號斜杠找到image，點gpg，看一下效果。此時圖片也完整顯示出來了。

→如果在amager四文件夾里還有一個amager四文件夾，下級路徑又該怎么寫？在amager文件夾里再新建一個文件夾，打開vscod，在左側的資源管理器中a major s文件夾下面又新增了一個a major s文件夾，在這里面又放了一張圖片。

這張圖片應該怎樣讓它展示出來？一起來看一下。

→首先找到同級的images文件夾，使用符號斜杠，此時vscode會提供給兩個選項，一個是imagers文件夾，另一個是imager.gpg。選擇imagers，imagers文件夾里面的imager.gpg的文件了，保存一下看看效果。

在瀏覽器中這兩張圖片都完美的展現出來了。

最后來看一下相對路徑里面的。上級路徑使用的符號是點點杠。上級路徑又應該怎么理解？也就是圖像文件是位于當前這個 hd ml文件的上一集。

在練習文件夾里新增一個名為 hd ml的文件夾，打開vs code，選擇剛剛新增的文件夾，選擇新建文件，這里需要新增一個 hd ml文檔。在當前 hd ml文檔中，如果想要調用上一級的 image 點 j p g 的圖片應該怎么做？在 sr c 屬性里面使用點點杠。

這里 vs code提供了上一集路徑中存在的文件，選擇 image 點 j p g，在瀏覽器中看下效果，此時圖片也是正常顯示的。如果hd ml文件藏得更深一些，把當前的文件復制一份，新增一個hd ml文件夾，將復制的文檔粘貼一下，打開剛剛復制的文檔，修改sr c屬性里面的值，使用點點杠。

此時是沒有找到 amage 點 j p g 的文件，這個時候就需要重復剛剛的操作，點點杠就能找到需要到的 amage 點 jbg 的文件了，保存一下看看效果。這里可以看到圖片還是正常顯示出來了。

本期視頻主要了解了相對路徑的三種分類，一個是同級路徑，一個是下級路徑，還有一個是上級路徑。希望小伙伴們下來可以好好練習一下，這對于后期的內容非常重要。下期再來聊聊絕對路徑。本期的內容到此結束，感謝觀看，下期再見。

歌Chrome中的檢查元素功能可以幫助你查看網頁上特定元素的HTML源代碼。在本教程中，我將向你展示如何使用此功能提取任何網頁的整個HTML代碼。

網站的HTML源代碼是web瀏覽器用來呈現頁面并根據頁面上應用的HTML、CSS和JS代碼和規則進行顯示的代碼。網站的源代碼，即網站的結構，是公開的，而且必須公開，以便瀏覽器能夠正確顯示。

現代網絡瀏覽器允許用戶查看他們正在查看的網頁的HTML源代碼。此功能對網頁設計者和開發人員的設計和開發工作特別有用。通過查看網站（或網頁）的HTML源代碼，你可以了解網站的結構、使用的HTML元素以及應用的CSS樣式。這不僅是學習如何使用HTML和CSS進行設計和編碼的好方法，也是測試自己的設計和檢查結果頁面上是否有錯誤的地方的好方法。

Web瀏覽器中頁面的源代碼通過Ctrl+U鍵盤快捷鍵或右鍵單擊頁面并選擇“查看頁面源代碼”選項來顯示。這顯示了頁面加載時的完整HTML代碼，它捕獲了頁面的靜態狀態，即使頁面具有動態功能，其內容也不會隨著時間的推移而變化，服務器端或客戶端也是如此。

要查看動態生成頁面（即通過JS生成的頁面）或具有動態變化內容的頁面（即具有不斷變化的新聞流的新聞網站或具有不斷變化界面的社交網絡）的HTML源代碼，我們可以使用谷歌Chrome的檢查功能，我將在下面詳細演示。

使用Chrome檢查查看和復制網頁的完整HTML代碼

使用檢查功能查看網頁源代碼的美妙之處在于，你可以查看和獲取在給定時間完全有效的HTML代碼，這在具有變化和移動元素的頁面上非常有用，這些元素會顯示和消失。

在檢查模式下，你可以對頁面上任何HTML元素的內容、屬性和樣式進行編輯。不過，這些更改只對你可見，不會以任何方式對你正在查看的網站進行永久更改。

現在，讓我們看看這是如何工作的。

1、啟動Chrome瀏覽器，打開你選擇的網頁。

2、右鍵單擊頁面上的任何位置，然后從下拉菜單中選擇“檢查”。也可以使用Ctrl+Shift+I鍵盤快捷鍵。

這將打開瀏覽器窗口右側或底部的“開發人員工具”部分，具體取決于你的屏幕大小和布局。

開發人員工具部分由一個頂部菜單和下面的兩個并排窗口組成。在左側，你將看到頁面的HTML源代碼，這些代碼可以逐個元素折疊和展開。在右側，你將看到在左側選擇的每個元素的樣式、事件偵聽器和屬性。

你將看到所有當前有效的HTML代碼，其中包含所有元素，如標題、段落、列表、鏈接、圖像甚至注釋。代碼量將是最小的，它在基本的HTML網頁上沒有復雜性，因此它將更快地顯示。然而，在高流量、動態的網站上，有很多元素和功能，HTML源代碼將相當長和復雜，因此需要更長的時間才能完全顯示。

3、轉到本節頂部，找到<html>標記，該標記通常位于doctype（文檔類型）聲明（例如 <!doctype html>）之后。

4、找到<html>標記后，按Ctrl+C或右鍵單擊它，然后選擇復制>復制outerHTML以復制頁面的所有html源代碼。

5、然后，你可以根據需要將此代碼粘貼到文本或HTML文件中，并對其進行進一步檢查和編輯。

在檢查模式中，你還將看到內聯樣式和對外部樣式表的引用（如果有的話）。此外，如果你在Chrome中應用了任何自定義用戶樣式，它們也將附加到你復制的HTML代碼的底部。

在前面

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

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

自測讀不讀

以下是本文所涉及到的知識點，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/

在線咨詢

上一篇：「按鍵精靈」旋轉驗證
下一篇：如何在 Java 中將 HTML 轉換為 PNG

您的項目需求

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

整合營銷服務商