整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
asyread是我看了遨游瀏覽器自帶的“閱讀模式”后，感覺(jué)這個(gè)功能挺好的，所以想在自己的博客上添加這個(gè)功能。于是就在自己的博客上完成了這個(gè)功能。這時(shí)候一個(gè)朋友感覺(jué)這個(gè)效果也不錯(cuò)，于是就問(wèn)我要了源碼。我想可不可以做成像網(wǎng)上的其他jQuery插件一樣，用戶可以把這個(gè)功能當(dāng)成一個(gè)jQuery插件，用的時(shí)候只需要引入js和css等，然后自己設(shè)置相關(guān)的代碼呢？于是我就開(kāi)始著手將其改成一個(gè)jQuery插件的形式。
因?yàn)槭堑谝淮螌慾Query插件，可能很多地方都不符合jQuery插件的規(guī)范，希望各位朋友想我多多提出寶貴的建議，讓這個(gè)插件更加完善。最后因?yàn)檫@個(gè)插件是為了方便瀏覽者閱讀的于是就給他起了個(gè)名字叫做easyread
<link rel="stylesheet" type="text/css" href="../style.css">
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/jquery.easyread.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".read").easyread({
titleClass:"article_content",
contentClass:"article_title"
});
});
</script>參數(shù)詳解
titleClass：標(biāo)題所在容器的類名 contentClass：正文所在容器的類名
地址：https://www.dpaoz.com/81
維網(wǎng)和其它網(wǎng)絡(luò)類型最大的區(qū)別就是它在網(wǎng)頁(yè)上可呈現(xiàn)豐富多彩的色彩和圖像，還可以播放音頻、視頻，及把圖像作為鏈接使用。
網(wǎng)絡(luò)上流行的圖片格式主要有jpg、jpeg、png、gif等，以下是這幾種格式的介紹。
1、gif格式
gif采用LZW壓縮，是以壓縮相同顏色色塊來(lái)減少圖像大小。由于LZW壓縮不會(huì)造成任何品質(zhì)的損失，且壓縮率高，支持動(dòng)畫效果，很適合互聯(lián)網(wǎng)平臺(tái)，但是它只支持256種顏色。
2、jpg或jpeg格式
以JPEG有損壓縮圖片，通常用來(lái)保存超過(guò)256色的圖片格式。JPEG壓縮過(guò)程會(huì)對(duì)一些圖像數(shù)據(jù)造成損失，這部分損失不影響圖片顯示，一般人眼是看不出來(lái)差異的。損失數(shù)據(jù)越多，圖片就越不清晰。
3、png格式
png是一種非破壞性的網(wǎng)頁(yè)圖像文件格式，它以最小的方式壓縮圖片且不造成圖片數(shù)據(jù)損失。它不僅支持像gif大部分優(yōu)點(diǎn)，還支持48 bit的色彩，跨平臺(tái)的圖像亮度控制，更多層的透明度設(shè)置。
網(wǎng)頁(yè)中通過(guò)<img>標(biāo)簽插入圖片，語(yǔ)法如下：
<img src="圖片路徑" alt="替換文本" />具體示例：
<!DOCTYPE HTML>
<html>
<body>
<p>
一幅圖像：
<img src="/i/eg_mouse.jpg" width="128" height="128" />
</p>
<p>
一幅動(dòng)畫圖像：
<img src="/i/eg_cute.gif" width="50" height="50" />
</p>
<p>請(qǐng)注意，插入動(dòng)畫圖像的語(yǔ)法與插入普通圖像的語(yǔ)法沒(méi)有區(qū)別。</p>
</body>
</html>效果如下：
替換文本屬性（Alt）
alt 屬性用來(lái)為圖像定義一串預(yù)備的可替換的文本。
<img src="boat.gif" alt="Big Boat">當(dāng)瀏覽器無(wú)法載入圖像時(shí)，替換文本屬性可告訴讀者他們失去的信息。此時(shí)，瀏覽器將顯示這個(gè)替代性的文本而不是圖像。為頁(yè)面上的圖像都加上替換文本屬性是個(gè)好習(xí)慣，這樣有助于更好地顯示信息，并且對(duì)于那些使用純文本瀏覽器的人來(lái)說(shuō)是非常有用的。
圖像寬度和高度屬性
如下代碼，在網(wǎng)頁(yè)中插入一個(gè)寬度和高度都是300像素的圖片。
<img src="/i/ct_netscape.jpg" width="300px" height="300px" />圖片超鏈接
如下代碼，在網(wǎng)頁(yè)中對(duì)一個(gè)圖片進(jìn)行超鏈接設(shè)置，點(diǎn)擊這張圖片就會(huì)跳轉(zhuǎn)到其它頁(yè)面。
<a href="頁(yè)面路徑"><img src="/i/ct_netscape.jpg" /></a>除了對(duì)整個(gè)圖片進(jìn)行超鏈接設(shè)置外，還可以將圖像劃分成不同區(qū)域進(jìn)行鏈接設(shè)置，比如一張地圖中給每個(gè)省份圖形進(jìn)行超鏈接。
圖像熱區(qū)鏈接，使用usemap 屬性通過(guò)#name指定到名叫name的map元素上，map定義了每個(gè)熱區(qū)點(diǎn)擊區(qū)域形狀、大小、坐標(biāo)等。
area標(biāo)簽的 shape 屬性有三種，rect 方形，circle 圓形，poly 多邊形。coords 屬性定義坐標(biāo)點(diǎn)位置，相對(duì)于圖片左上角位置。
示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool(w3cschool.cn)</title>
</head>
<body>
<p>點(diǎn)擊太陽(yáng)或其他行星，注意變化：</p>
<img src="/statics/images/course/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" target="_blank" alt="Sun" href="/statics/images/course/sun.gif">
<area shape="circle" coords="90,58,3" target="_blank" alt="Mercury" href="/statics/images/course/merglobe.gif">
<area shape="circle" coords="124,58,8" target="_blank" alt="Venus" href="/statics/images/course/venglobe.gif">
</map>
</body>
</html>效果可參考 https://www.w3cschool.cn/html5/html5-img.html 這里。
可以看到鼠標(biāo)在圖片上點(diǎn)擊小行星會(huì)打開(kāi)對(duì)應(yīng)的圖片。
到此網(wǎng)頁(yè)中使用圖片已經(jīng)大體介紹了，自己親手寫下，會(huì)加深印象，感謝關(guān)注。
上篇：前端入門——html 超鏈接
下篇：前端入門——html 如何在網(wǎng)頁(yè)中使用視頻音頻
于安全和隱私的原因，web 應(yīng)用程序不能直接訪問(wèn)用戶設(shè)備上的文件。如果需要讀取一個(gè)或多個(gè)本地文件，可以通過(guò)使用input file和FileReader來(lái)實(shí)現(xiàn)。在這篇文章中，我們將通過(guò)一些例子來(lái)看看它是如何工作的。
由于瀏覽器中的 JS 無(wú)法從用戶的設(shè)備訪問(wèn)本地文件，我們需要為用戶提供一種方法來(lái)選擇一個(gè)或多個(gè)文件供我們使用。這可以通過(guò)文件選擇器<input type='fule' />來(lái)完成。
<input type="file" id="fileInput">如果想允選擇多個(gè)文件，可以添加multiple屬性:
<input type="file" id="fileInput" multiple>我們可以通過(guò)change事件來(lái)監(jiān)聽(tīng)文件的選擇，也可以添加另一個(gè) UI 元素讓用戶顯式地開(kāi)始對(duì)所選文件的處理。
input file 具有一個(gè)files屬性，該屬性是File對(duì)象的列表（可能有多個(gè)選擇的文件）。
File對(duì)象如下所示：
讀取文件，主要使用的是[FileReader][1]類。
「該對(duì)象擁有的屬性：」
「FileReader.error」 ：只讀，一個(gè)DOMException，表示在讀取文件時(shí)發(fā)生的錯(cuò)誤 。
「FileReader.readyState」：只讀 表示 FileReader 狀態(tài)的數(shù)字。取值如下：
常量名值描述EMPTY0還沒(méi)有加載任何數(shù)據(jù)LOADING1數(shù)據(jù)正在被加載DONE2已完成全部的讀取請(qǐng)求
「FileReader.result」：只讀，文件的內(nèi)容。該屬性僅在讀取操作完成后才有效，數(shù)據(jù)的格式取決于使用哪個(gè)方法來(lái)啟動(dòng)讀取操作。
「該對(duì)象擁有的方法：」
readAsText(file, encoding)：以純文本形式讀取文件，讀取到的文本保存在result屬性中。第二個(gè)參數(shù)代表編碼格式。
readAsDataUrl(file)：讀取文件并且將文件以數(shù)據(jù)URI的形式保存在result屬性中。
readAsBinaryString(file)：讀取文件并且把文件以字符串保存在result屬性中。
readAsArrayBuffer(file)：讀取文件并且將一個(gè)包含文件內(nèi)容的ArrayBuffer保存咋result屬性中。
FileReader.abort()：中止讀取操作。在返回時(shí)，readyState屬性為DONE。
「文件讀取的過(guò)程是異步操作，在這個(gè)過(guò)程中提供了三個(gè)事件：progress、error、load事件。」
progress：每隔50ms左右，會(huì)觸發(fā)一次progress事件。
error：在無(wú)法讀取到文件信息的條件下觸發(fā)。
load：在成功加載后就會(huì)觸發(fā)。
在下面的示例中，我們將使用readAsText和readAsDataURL方法來(lái)顯示文本和圖像文件的內(nèi)容。
為了將文件內(nèi)容顯示為文本，change需要重寫一下：
首先，我們要確保有一個(gè)可以讀取的文件。如果用戶取消或以其他方式關(guān)閉文件選擇對(duì)話框而不選擇文件，我們就沒(méi)有什么要讀取和退出函數(shù)。
然后我們繼續(xù)創(chuàng)建一個(gè)FileReader。reader的工作是異步的，以避免阻塞主線程和 UI 更新，這在讀取大文件(如視頻)時(shí)非常重要。
reader發(fā)出一個(gè)'load'事件(例如，類似于Image對(duì)象)，告訴我們的文件已經(jīng)讀取完畢。
reader將文件內(nèi)容保存在其result屬性中。此屬性中的數(shù)據(jù)取決于我們使用的讀取文件的方法。在我們的示例中，我們使用readAsText方法讀取文件，因此result將是一個(gè)文本字符串。
如果我們想要顯示圖像，將文件讀取為字符串并不是很有用。FileReader有一個(gè)readAsDataURL方法，可以將文件讀入一個(gè)編碼的字符串，該字符串可以用作<img>元素的源。本例的代碼與前面的代碼基本相同，區(qū)別是我們使用readAsDataURL讀取文件并將結(jié)果顯示為圖像:
1）由于安全和隱私的原因，JavaScript 不能直接訪問(wèn)本地文件。
2）可以通過(guò) input 類型為 file 來(lái)選擇文件，并對(duì)文件進(jìn)行處理。
3） file input 具有帶有所選文件的files屬性。
4） 我們可以使用FileReader來(lái)訪問(wèn)所選文件的內(nèi)容。
作者: Martin Splitt 譯者：前端小智 來(lái)源：dev
原文：https://dev.to/g33konaut/reading-local-files-with-javascript-25hn
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
